Question

我有一个呈现元素的简单指令，这是模板：

<div class="nav-item"></div>

.nav-item class：

.nav-item {
  height: 50;
}

指令：

    angular.module('myapp')
.directive('navItem', ['info',
  function(info) {
    return {
      scope: {
        position: '@'
      },
      link: function(scope, element) {
        function _addData() {
          var rect = element.get(0).getBoundingClientRect();
          info.addData(scope.position, rect);
        }

        _addData();
      },
      templateUrl: 'tmpl.html'
    };
  }]
);

当链接函数调用_addData方法时，我得到渲染元素的位置并在自定义工厂中注册，这样做效果很好，rect对象有top，bottom，height ......所有正确的渲染属性。但是当我通过ngClass更改模板类属性时会出现问题，如果我在tmpl中执行此操作：

<div data-ng-class="{'nav-item': true}"></div>

当_addData调用getBoundingClientRect时，它返回的高度是1而不是50，我认为当处理链接函数时，ngClass不适用于该元素，你认为我是对的吗？我如何“等待”以获得正确的位置元素？另外我在指令中包含postLink函数来检查相同而不工作...

Answer 1

嗯......我解决了这个问题，在解释之前我必须告诉我有关于优先级和终端指令属性的阅读。我的问题是ngClass在我的链接函数之前没有执行，ngClass在属性中使用$ watch，因此摘要进程以最后的顺序执行ngclass。所以要解决我的问题，我只是在链接函数中使用addClass而不是使用ngClass：

TMPL：

<div></div>

指令：

angular.module('myapp')
.directive('navItem', ['info',
  function(info) {
    return {
      scope: {
        position: '@'
      },
      link: function(scope, element) {
        function _addData() {
          var rect = element.get(0).getBoundingClientRect();
          info.addData(scope.position, rect);
        }
        element.children().eq(0).addClass('nav-item');
        _addData();
      },
      templateUrl: 'tmpl.html'
    };
  }]
);

Angular ng Class不适用于链接功能

1 个答案: