javascript - 如何在AngularJS指令中更新类

我想在点击指令时更改类（内部指令），
这是我当前的代码，其中scope.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>`
  }
});

最佳答案

您的问题与使用$apply方法摘要执行循环有关。

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

这样：

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

这将手动强制摘要周期在示波器上发生，它将贯穿其所有观察程序并寻找更改。

请记住在该范围内进行所有更新。

希望这可以帮助！