Question

我有一个方案，其中调用指令的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：无法读取未定义的属性'offsetTop'” - 因为element是一个空数组！

一些注意事项：

replace

outer设置为true。

templateUrl

outer来加载其部分内容。

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

Answer 1

尝试

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)
        }
    };
});

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

1 个答案: