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

Question

我想在单击指令时更改类(指令内部)，这是我当前的代码，其中 scope.myattr 在控制台中更新，但不在模板或 View 中更新:

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

Answer 1

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

替换这一行:scope.myattr = attrs.myattr;

这样:

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

这会手动强制在作用域上发生摘要循环，该循环将遍历其所有观察者并查找更改。

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

希望这有帮助!