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中有ng-class属性，我希望模板代码中的active表达式添加is-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;。

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

1 个答案: