javascript - Angularjs 指令 : How to update ng-class in template after change in attribute

Question

我有以下指令:

(function() {
  'use strict';

  angular
    .module('app.navbar')
    .directive('myItem', myItem);

  function myItem() {
    var directive = {
      restrict: 'E',
      transclude: true,
      scope: {
        href: '@'
      },
      template : 
        '<li ng-class="{\'active\' : scope.active}"><a href="{{href}}" ng-transclude></a></li>',
      link : link
    };
    return directive;

    /////////////////

    function link(scope, elem, attr) {
      scope.$watch(function() {
        scope.active = ('isActive' in attr);
        console.log("scope active: " + scope.active);
      })
    }
  }

})();

如果模板代码中有一个is-active属性，我希望模板代码中的ng-class表达式添加active类html，例如...

<my-item>Item 1</my-item>
<my-item is-active>Item 2</my-item>

...将是 html 并且 Item 2 菜单项将被激活。如您所见，我已经实现了一个 link 函数，我试图在其中评估是否存在名为 is-active 的属性。如果它存在，那么我将设置一个名为 scope.active 的范围变量。然而，就模板中的 ng-class 而言，此范围变量始终保持未定义状态。

谁能解释一下如何解决这个问题？

非常感谢!

Answer 1

你不需要scope前缀，评估上下文是scope对象本身:

template: '<li ng-class="{active: active}"><a href="{{href}}" ng-transclude></a></li>',

您也不需要 $watch 只需在 attr; 中设置 scope.active = 'isActive'; 在链接函数中。