我有大約10個指令使用隔離範圍。它們都綁定到名爲size
的參數。所以我打算創建一個通用指令suiCommon
並在所有10個指令中包含此指令。所以我不需要爲所有10個指令重複scope: { size: '@' }
。當屬性值改變時更新指令視圖
在我當前的解決方案JSFiddle中,該參數正確傳遞到指令中。但是,當外部值更改時,指令中的值不會更改並應用。
我共同的指令是:
angular.module('sui.common', [])
.directive('suiCommon', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function (scope, iElement) {
var $parentElement = iElement.parent();
$timeout(function() {
scope.vm.size = $parentElement.attr('size');
});
}
}
}]);
我的一個10個指令是這樣的:
angular.module('sui.rating', ['sui.common'])
.directive('suiRating', [function() {
return {
restrict: 'A',
scope: {},
template:
'<div sui-common class="ui {{vm.size}} rating sui-rating">Content</div>',
controllerAs: 'vm',
bindToController: true,
controller: ['$scope', function ($scope) {}]
};
}]);
這裏是HTML:
<div ng-app="Joy" ng-controller="JoyCtrl as vm">
<div ng-click="vm.setSize()">Click to change size</div>
<div sui-rating size="{{vm.size}}"></div>
</div>
現在,當size
更改爲small
通過ng-click
,指令內的值不是cha nged。根據我的理解,ng-click
將觸發$scope.$apply
,這將重新呈現指令suiCommon
。似乎我錯了...
有人請解釋原因嗎?如何解決它?還是有更好的解決方案?
只是一個意見,但我覺得在每個指令中有「範圍:{size:'@'}」比創建一個將參數注入其他指令的指令更清晰和可維護。這將是很難理解你的指令發生了什麼 – Okazari
@Okazari感謝您的建議。我想有一些更好的方法來實現這一點。並將等待更多的意見。 – Joy