Angularjs指令：如何在属性更改后更新模板中的ng-class

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

})();

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

<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，只需在链接函数中设置scope.active = 'isActive' in attr;。