[英]How to make AngularJS directive as active
我在同一頁面的3個地方（ A ， B ， C ）使用指令。
當我單擊其中一個（即B ）時，它正在其上添加一個類（活動）。
但是與此同時，我需要從另外兩個按鈕中刪除活動類。
<test defaultclass="active">A</test>
<test>B</test>
<test>C</test>
app.directive("test", function() {
return {
restrict: 'E',
scope: {
defaultclass: "=?"
},
transclude: true,
link: function(scope, element, attrs) {
scope.activeclass = attrs.defaultclass
element.bind('click', function() {
scope.$apply(function() {
scope.activeclass = 'active';
});
});
},
template: '<btn ng-class="activeclass">Button <span ng-transclude></span></btn>'
}
});
這是示例插件： https ://plnkr.co/edit/J330f4jrHZnpUS9J66qY ? p = preview
排序上，我想一次只保持一個按鈕處於活動狀態。
有兩種方法可以管理這些東西
**方式1 **（簡單）
您可以添加以下行來解決此問題。
scope.$apply(function() {
angular.element（'。active'）。removeClass（'。active'）; //如果您在項目jquery中，這是jLite代碼，因此您可以將其替換為jquery代碼
scope.activeclass = 'active';
});
方式2 （位復雜）。
當用戶是客戶端時，通過唯一的id檢查來跟蹤每個指令
更好的方法是像這樣處理外部點擊
<body>
<test is-active='chosen_button=="a"' ng-click='chosen_button="a"'>A</test>
<test is-active='chosen_button=="b"' ng-click='chosen_button="b"'>B</test>
<test is-active='chosen_button=="c"' ng-click='chosen_button="c"'>C</test>
</body>
和指令
app.directive("test", function() {
return {
restrict: 'E',
scope: {
isActive: "="
},
transclude: true,
link: function(scope, element, attrs) {
},
template: '<btn ng-class="isActive?\'active\':\'\'">Button <span ng-transclude></span></btn>'
}
});
Angular.js-如何查看指令是否在dom中處於活動狀態？
[英]Angularjs- How to see if a directive is active/in the dom or not?
如何使AngularJS指令更改圖像的src屬性？
[英]How to make an AngularJS directive to change the src attribute of an image?
如何使AngularJS指令操縱與之關聯的所有元素？
[英]How do I make an AngularJS directive manipulate all elements associated with it?
AngularJS：如何在子指令之前編譯使用包含的父指令？
[英]AngularJS: How to make parent directive using transclusion be compiled before the child directive?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.