2

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

一个代码示例最好地描述了该场景：

索引.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;
        }
    };
});

templateUrlpartial.html（上面的on引用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必须在指令上设置为 true outer。
  • templateUrl指令必须使用outer它来加载它的部分。

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

4

1 回答 1

0

尝试

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)
        }
    };
});
于 2013-04-03T13:43:07.380 回答