3

我正在编写一个 Angular 指令来包装我想在我的应用程序中使用的第三方插件。该插件需要读取分配给我使用自定义指令的元素的类。在标记中进行静态类分配时，我可以很好地访问类属性；但是如果我用来ngClass动态地为我的元素分配一个额外的类，它对我的​​自定义指令是不可见的。

我写了一个简单的 plunkr 来演示以下问题：

http://plnkr.co/edit/i5iBwlKXuvrdjF85wiIU?p=preview

但它的主旨包含在这里：

<body ng-controller="MainCtrl"> 
  <div class="staticAssignment"
    ng-class="cssClass"
    my-directive>
  </div>
</body>

和：

app.controller('MainCtrl', function($scope) {
  $scope.cssClass = 'dynamicAssignment';
});

app.directive("myDirective", function () {
  return {
    link: function (scope, element, attr) {
      console.log("my classes: ", element.attr('class'))
    }
  };
});

当指令的link函数执行时，我希望它记录： "staticAssignment dynamicAssignment"，但是在链接时看不到动态分配的类。

link将我的函数内容包装在 a 中$timeout解决了这个问题，但它仍然提出了一个问题：是否有一种可靠的方法来定义在给定元素上评估各种指令的顺序？理想情况下，我想myDirective明确地等待ngClass完成它的爵士乐，然后再进行自己的操作。

谢谢！

4

3 回答 3

3

您可以在侦听器中观看表达式attr.ngClass并进行打印。使用ngClass当前实施的方式，无论priority您给出哪个指令，这种方法都有效。

app.directive("myDirective", function () {
  return {
    link: function (scope, element, attr) {
      scope.$watch(attr.ngClass, function(val) {
        console.log("my classes: ", element.attr('class'))  
      });
    }
  };
});

演示链接

于 2013-09-25T02:27:56.197 回答
1

因此，经过大量研究，我得出的结论是，这class是一个特殊情况属性，无法使用当前 api 跟踪/观看（ngClass可以观看，请参阅 Buu Nguyen 的回答）。请允许我记录我的发现步骤。

首先我检查了角度文档并找到了这个片段：

Attributes 对象 - 作为参数在 link() 或 compile() 函数中传递 - 是一种访问方式：

...

  • 指令间通信：所有指令共享属性对象的相同实例，这允许指令使用属性对象作为指令间通信。

  • 观察插值属性：使用$observe 观察包含插值的属性的值变化（例如src="{{bar}}"）。这不仅非常有效，而且也是轻松获得实际值的唯一方法，因为在链接阶段尚未评估插值，因此此时该值设置为未定义。

所以我想这attr.$observe('class', function(value) {})就是你需要的答案。令我惊讶的是，这没有奏效！

我开始检查 1.2.0-rc2 的源代码是否存在问题。我发现该attr对象包含一个名为的函数，该函数$set用于设置属性值并触发观察者函数。不幸的是，当它改变属性的值时ngClass不调用，它调用. 这些其他方法不会像人们期望的那样触发观察者，而是直接调用. 同样的问题存在于 1.0.8 版本中，只是没有调用.$setclassattr.$addClass/$removeClasselement.addClass$animate$animate

有趣的是，它的实现中ngClass有一个attr.$observe('class', ...，但是只有在 angular 之外的人调用时才会调用该观察者$set('class', ..。

我想这是因为元素的类属性可能经常变化，并且一直解雇所有这些观察者是一种资源浪费。幸运的是，Buu Nguyen 为您的特殊情况提供了答案；）。

于 2013-09-25T02:44:20.360 回答
0

您是否尝试设置指令的优先级属性？

优先级 - 当在单个 DOM 元素上定义了多个指令时，有时需要指定应用指令的顺序。优先级用于在调用编译函数之前对指令进行排序。优先级被定义为一个数字。首先编译具有更高数值优先级的指令。具有相同优先级的指令的顺序未定义。默认优先级为 0。

来自角度文档。

于 2013-09-24T23:41:48.570 回答