Javascript 如何在AngularJS指令中更新类

我想在单击指令时更改类（内部指令）， 以下是我的当前代码，其中

范围。myattr

正在控制台中更新，但不在模板或视图中：

<test order="A">Test</test>

.directive("test", function () {
  return {
    restrict: 'E',
    scope: {
      myattr: "="
    },
    transclude: true,
    link: function (scope, element, attrs) {
      scope.myattr = attrs.myattr;
      element.bind('click', function () {
        console.log(scope.myattr);
        if (scope.myattr == 'A') {
          scope.myattr = 'B';
        }
        else {
          scope.myattr = 'A';
        }
      });
    },
    template: `
          <span ng-transclude></span>
          <span class="sortIcon {{myattr}}">{{myattr}}</span>`
  }
});

测试
.指令（“测试”，功能（）{
返回{
限制：'E'，
范围：{
myattr:“=”
},
是的，
链接：函数（范围、元素、属性）{
scope.myattr=attrs.myattr；
元素绑定（'单击'，函数（）{
console.log（scope.myattr）；
如果（scope.myattr=='A'）{
scope.myattr='B'；
}
否则{
scope.myattr='A'；
}
});
},
模板：`
{{myattr}}`
}
});

您的问题是关于使用

$apply

方法消化循环执行

替换此行：

scope.myattr=attrs.myattr

通过此：

scope.$apply(function(){
    scope.myattr = attrs.myattr;
});

这将手动强制作用域上发生摘要循环，该循环将在其所有观察程序中运行并查找更改

记住在该范围内的所有更新中都这样做

希望这有帮助
您的问题是关于使用
$apply
方法消化循环执行

替换此行：
scope.myattr=attrs.myattr

通过此：

scope.$apply(function(){
    scope.myattr = attrs.myattr;
});

这将手动强制作用域上发生摘要循环，该循环将在其所有观察程序中运行并查找更改

记住在该范围内的所有更新中都这样做

希望这有帮助
我认为它可以用于添加类和删除类。额外的好处是，您不会用括号“污染”HTML，一切都在控制器中

试验

指令（“测试”，函数（）{
返回{
限制：'E'，
范围：{
myattr:“=”
},
是的，
链接：函数（范围、元素、属性）{
scope.myattr=attrs.myattr；
elem.bind（'单击'，函数（e）{
如果（scope.myattr=='A'）{
angular.element（如目标）.removeClass（'A'）；
angular.element（e.target）.addClass（'B'）；
}
如果（scope.myattr=='B'）{
角度元素（如目标）.removeClass（'B'）；
angular.element（e.target）.addClass（'A'）；
}
});
});
},
模板：`
{{myattr}}`
}
});

如果你想用代码污染HTML，那么选择
ng class
指令。它用于类表达式，提供了比直接绑定类名更多的选项。
我认为它可以用于添加类和删除类。额外的好处是，您不会用括号“污染”HTML，一切都在控制器中

试验

指令（“测试”，函数（）{
返回{
限制：'E'，
范围：{
myattr:“=”
},
是的，
链接：函数（范围、元素、属性）{
scope.myattr=attrs.myattr；
元素绑定（'click'，函数（e）{
如果（scope.myattr=='A'）{
angular.element（如目标）.removeClass（'A'）；
angular.element（e.target）.addClass（'B'）；
}
如果（scope.myattr=='B'）{
角度元素（如目标）.removeClass（'B'）；
angular.element（e.target）.addClass（'A'）；
}
});
});
},
模板：`
{{myattr}}`
}
});

---

如果你想用代码污染HTML，那么选择

ng class

指令。它用于类表达式，提供了比直接绑定类名更多的选项。

我建议不要使用$apply，因为强制摘要循环时会遇到很多问题。具体来说，如果当前正在运行一个摘要周期，则不能中断并启动新的摘要周期。在这种情况下，Angular将抛出一个错误。显式摘要周期也会对性能产生负面影响，因为它必须运行一个循环来检查所有范围变量，以查看发生了什么变化。我建议对基于表达式的类使用“ng类”

只有在Angular上下文之外更改了范围变量时，才需要手动运行摘要循环，如下文所述

---

我认为您当前的强制摘要循环解决方案之所以有效，是因为您使用了双向数据绑定，因为它不在您的指令范围内，因为您指定了ng transclude的方式。最好有适当的范围结构，不要强制任何摘要循环，因为指令有自己的摘要循环。

我建议不要使用$apply，因为强制摘要循环时会遇到很多问题。具体来说，如果当前正在运行一个摘要周期，则不能中断并启动新的摘要周期。在这种情况下，Angular将抛出一个错误。显式摘要周期也会对性能产生负面影响，因为它必须运行一个循环来检查所有范围变量，以查看发生了什么变化。我建议对基于表达式的类使用“ng类”

只有在Angular上下文之外更改了范围变量时，才需要手动运行摘要循环，如下文所述

---

我认为您当前的强制摘要循环解决方案之所以有效，是因为您使用了双向数据绑定，因为它不在您的指令范围内，因为您指定了ng transclude的方式。最好有适当的作用域结构，不要强制任何摘要循环，因为指令有自己的摘要循环。

您可能需要调用

$apply

方法来强制父作用域的摘要循环。您可能需要调用

$apply

方法来强制父作用域的摘要循环。谢谢Eleazar，它起作用了！但是如果我尝试不使用属性

Test

它会在属性..中给出一个错误“表达式'未定义'”，我可以将此属性用作可选属性吗？通过此

myattr更改此
myattr:“=”
：