我自己寫了一個directive,如下:
html
<myDirective source="listOne()"</myDirective>
<myDirective source="listTwo()"</myDirective>
controller
...
$scope.listOne = function(){
//返回一个promise
};
$scope.listTwo = function(){
//返回另一个promise
};
...
directive
angular.module('myApp')
.directive('myDirective', function() {
function DataList(sourceFn) {
var debounceId;
self.list = [];
self.load = function(){
$timeout.cancel(debounceId);
debounceId = $timeout(function() {
var promise = sourceFn();
promise.then(function(data) {
self.list = data;
});
},0,false);
};
return self;
}
return {
restrict: 'E',
replace: true,
scope: {
source: '&'
},
link: function(scope, element, attr) {
...
var data = new DataList(scope.source);
...
scope.dataset = data.list;
...
},
template: '\
...\
<li ng-repeat="d in dataset">{{d}}</li>\
...\'
};
}
那麼問題來了,預期的是兩個source會返回不同的兩組數據,但是實際情況是兩個列表顯示的數據相同,而且是第二個函數listTwo()返回的數據,也就是如果我把listOne()和listTwo(),調換位置,那麼回傳的就是listOne()的資料。
難道是在
var data = new DataList(scope.source);
...
scope.dataset = data.list;
第二次new的時候把第一次的資料替換了?
但是scope:{source: '&'}不是會為directive產生一個自己的scope嗎?
想好好學習下directive,先謝謝各位
PHP中文网2017-05-15 16:52:57
是你的DataList的問題,你回傳的是self引用,看樣子應該是window了,所以對應的list是一個全域變量,這樣不管你賦值多少次,只有最後一次生效