使用空元素参数调用的角度指令的链接函数

我有一个场景，一个指令的link函数调用一个空的element参数导致错误。

一个代码示例最好地描述了这个场景:

index . html:

<html ng-app="app">
<body>
    <div outer></div>
</body>
</html>

脚本:

var app = angular.module('app', []);
app.directive('outer', function() {
    return {
        replace: true,
        controller: function($scope) {
            $scope.show = true;
        },
        templateUrl: 'partial.html'
    };
});
app.directive('inner', function($window) {
    return {
        link: function(scope, element, attrs) {
            console.log('element: ' + element);
            var top = element[0].offsetTop;
        }
    };
});

partial.html(上面templateUrl对outer的引用):

<div ng-switch on="show">
    <div ng-switch-when="true">
       <div inner>showing it</div>
    </div>
</div>

在Chrome中加载index.html，控制台报告错误:"TypeError: Cannot read property 'offsetTop' of undefined" -因为element是一个空数组!

一些注意事项:

replace必须在指令outer上设置为true。
templateUrl必须被指令outer用来加载它的部分。

我不确定我是否忽略了一些配置要求，或者这是否是Angular的问题。这是一个有效的场景吗?如果是，那是ng-switch的问题，还是Angular内部有更深层次的问题?

Try

app.directive('inner', function($window) {
    return {
        link: function(scope, element, attrs) {
            console.log('element: ',  element);
            if(!element.length){
              console.log('Returning since there is no element');
              return;
            }
           var top = element[0].offsetTop;
           console.log('top', top)
        }
    };
});

相关内容

最新更新

热门标签：