2

ディレクティブの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 (上記のtemplateUrlonouterで参照):

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

Chrome で index.html をロードすると、コンソールに「TypeError: 未定義のプロパティ 'offsetTop' を読み取れません」というエラーが報告されますelement。

いくつかのメモ:

  • replaceディレクティブで true に設定する必要がありますouter。
  • templateUrlouterパーシャルをロードするには、ディレクティブで使用する必要があります。

構成要件を見落としているのか、それとも Angular の問題なのかはわかりません。これは有効なシナリオですか? もしそうなら、それは ng-switch の問題ですか、それとも Angular 内により深い問題がありますか?

4

1 に答える 1