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'值。嘗試把'console.log（$ scope.title）'放在指令'link'函數中。 –

@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

完全隨機的怪異的東西。正如你可以通過評論和其他答案告訴，我的原始代碼似乎很好。

拉了我的頭髮很多小時後，我試着將指令模板從templateUrl改爲直線模板。

而且固定了一切。

完全愚蠢。如果有人有解釋，我很樂意聽到它。

來源

2017-08-01 19:37:55 Jan

AngularJS - 爲什麼我的指令/控制器只加載一次？

回答

相關問題