AngularJS - ディレクティブ/コントローラが一度だけロードされるのはなぜですか？

私はこのディレクティブがあります。AngularJS - ディレクティブ/コントローラが一度だけロードされるのはなぜですか？

App.directive('tablealerts', function(){ 
return { 
    restrict: 'E', 
    templateUrl: 'html/table_alerts.html', 
    controller: 'tableController', 
    replace: true, 
    scope: { 
     title: "@", 
     memberId: "=", 
     columns: "=", 
     accessor: "=", 
     export: "=" 
    }, 
    link : function(scope, element, attrs, controllers) { 
     console.log(scope); 
     console.log(element); 
     console.log(attrs); 
     console.log(controllers); 
    } 
}; 
});

をそして、これはコントローラです：

App.controller('tableController',['$scope','$rootScope',function($scope,$rootScope) { 
    console.log($scope.title); 
}]);

コードを簡潔にするために取り除かれているが、私は今、そうのようなHTMLにディレクティブを複数回使用している場合：

を

<tablealerts title="Alerts" 
     columns="[{'label':'Date Time','value':'DateCreated'}, 
        {'label':'Event','value':'EventName'}, 
        {'label':'Device','value':'DeviceType'}]" 
     accessor="tableAccessor" member-id="1"> 
    </tablealerts> 
    <tablealerts title="Events" 
     columns="[{'label':'Date Time','value':'DateCreated'}, 
        {'label':'Device','value':'DeviceType'}]" 
     accessor="tableAccessor" member-id="2"> 
    </tablealerts>

コンソールには、<tablealerts>のいずれかのタイトルのみが表示されますが、両方は表示されません。ここで

は私のコンソール出力です：私は間違っ

Events 
Scope {$id: 45, $$childTail: null, $$childHead: null, 
     $$prevSibling: null, $$nextSibling: null…} 
[div.panel.panel-sky.ng-isolate-scope] 
Attributes {$attr: Object, $$element: JQLite(1), title: "Events", 
     columns: "[{'label':'Date Time','value':'DateCreated'}, 
        {'lab…ntName'}, 
        {'label':'Device','value':'DeviceType'}]", 
     accessor: "tableAccidentAccessor"…} 
Object {}

何をしているのですか？

出典

2017-08-01 Jan

これは意味があります。コントローラーの 'title'を設定していますので、' console.log'を出すと、現在持っているものが表示されます。私はあなたが指示の 'title'値を知りたいと思うと思います。指令 'link'に' console.log（$ scope.title） 'を入れてみてください。 –

@JarekKulikowskiしかし、私がここに示しているコントローラは、指令に割り当てられたコントローラです。それは内部の範囲として機能するはずですか？とにかく、私はリンク機能でログを追加しようとしましたが、私は同じ結果を持っています。コンソールの1つの出力... – Jan

@JarekKulikowski私はコンソールのログとコンソールの出力とのリンク機能を含むように私の質問を変更しました – Jan

ディレクティブで正しいタイトルが取得されています。私はあなたのコードに何か間違っているとは思わない。それはちょうど見るべき場所の問題である。スニペットを見てください。

App = angular.module('myApp', []); 
 

 
App.directive('tablealerts', function(){ 
 
return { 
 
    restrict: 'E', 
 
    template: '<div></div>', 
 
    controller: 'tableController', 
 
    replace: true, 
 
    scope: { 
 
     title: "@", 
 
     memberId: "=", 
 
     columns: "=", 
 
     accessor: "=", 
 
     export: "=" 
 
    }, 
 
    link : function(scope, element, attrs, controllers) { 
 
     console.log(' DIR '); 
 
     console.log(scope.title); 
 
     //console.log(element); 
 
     //console.log(attrs); 
 
     //console.log(controllers); 
 
     //console.log(attrs.title); 
 
    } 
 
}; 
 
}); 
 

 
App.controller('tableController',['$scope','$rootScope',function($scope,$rootScope) { 
 
    //console.log($scope.title); 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
<div ng-controller="tableController"> 
 
    <tablealerts title="Alerts" columns="[{'label':'Date Time','value':'DateCreated'},{'label':'Event','value':'EventName'},{'label':'Device','value':'DeviceType'}]" accessor="tableAccessor" member-id="1"></tablealerts> 
 
    <tablealerts title="Events" columns="[{'label':'Date Time','value':'DateCreated'},{'label':'Device','value':'DeviceType'}]" accessor="tableAccessor" member-id="2"></tablealerts> 
 
</div> 
 
</body>

出典

2017-08-01 17:09:17

完全にランダムな奇妙なもの。コメントと他の答えで分かるように、私の元のコードはうまく見えました。

長時間髪を引っ張った後、directiveテンプレートをtemplateUrlからstraight templateに変更しようとしました。

これですべてが修正されました。

完全に愚かです。もし誰かが説明をしたら、それを聞いて欲しいです。

出典

2017-08-01 19:37:55 Jan

AngularJS - ディレクティブ/コントローラが一度だけロードされるのはなぜですか？

答えて

関連する問題