Javascript 如何使AngularJS指令处于活动状态_Javascript_Html_Angularjs_Angularjs Directive

Javascript 如何使AngularJS指令处于活动状态

javascript html angularjs

Javascript 如何使AngularJS指令处于活动状态,javascript,html,angularjs,angularjs-directive,Javascript,Html,Angularjs,Angularjs Directive,我在同一页的3个位置使用指令（a，B，C）当我单击其中一个（即B）时，它正在其上添加一个类（活动）但同时，我需要从另外两个按钮中删除活动类 <test defaultclass="active">A</test> <test>B</test> <test>C</test> app.directive("test", function() { return { restrict: 'E', scope

我在同一页的3个位置使用指令（

，

）当我单击其中一个（即

）时，它正在其上添加一个类（活动）

但同时，我需要从另外两个按钮中删除活动类

<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>'
  }
});

A
B
C
应用指令（“测试”，函数（）{
返回{
限制：'E'，
范围：{
defaultclass:“=？”
},
是的，
链接：函数（范围、元素、属性）{
scope.activeclass=attrs.defaultclass
元素绑定（'单击'，函数（）{
作用域$apply（函数（）{
scope.activeclass='active'；
});
});
},
模板：“按钮”
}
});

以下是plunker示例：

在排序中，我希望一次只激活一个按钮。

有两种方法来管理这些事情

**方法1**（很简单）

您可以添加以下行来解决此问题

scope.$apply(function() {

angular.element（'.active'）。removeClass（'.active'）；//这是jLite代码，如果在您的项目jquery中，那么您可以用jquery代码替换它

方式2（位复杂）

当用户是客户机时，使用唯一id检查跟踪每个指令有两种方法来管理这些内容

**方法1**（很简单）

您可以添加以下行来解决此问题

scope.$apply(function() {

angular.element（'.active'）。removeClass（'.active'）；//这是jLite代码，如果在您的项目jquery中，那么您可以用jquery代码替换它

方式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>


A.
B
C

指令呢

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>'
  }
});

app.directive（“test”，function（））{
返回{
限制：'E'，
范围：{
isActive:“=”
},
是的，
链接：函数（范围、元素、属性）{
},
模板：“按钮”
}
});

更好的方法是像这样处理外部点击

<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>


A.
B
C

指令呢

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>'
  }
});

app.directive（“test”，function（））{
返回{
限制：'E'，
范围：{
isActive:“=”
},
是的，
链接：函数（范围、元素、属性）{
},
模板：“按钮”
}
});

在指令之外执行此操作，而不是在链接功能之外执行此操作