Angularjs ng-class $link答案

【问题标题】：Angularjs ng-class $linkAngularjs ng-class $link
【发布时间】：2014-10-03 14:53:51
【问题描述】：

我有一个指令“D1”需要生成一个嵌套指令“D2”，它应该使用“D1”元素宽度来生成 svg 内容。

“D1”指令使用 ng-class 动态确定维度

directive.template = "<div ng-class="col"></div>"

变量 col 在指令控制器范围内定义为

$scope.col = "col-md-3" //Boostrap grid system

“D1”指令链接函数包含生成嵌套指令的代码

var x = angular.element('<D2></D2>');
element.append(x);
$compile(x)(scope);

困难从这里开始。

第二个指令“D2”应该使用“D1”元素内部宽度来生成具有适当大小的内容，但是从“D2”链接函数记录 element.width() 返回错误的尺寸，忽略之前应用于“D1”的 css 样式使用 ng-class。

我假设“D2”链接函数在“D1”ng-class 实际应用该类之前运行

有没有人建议如何解决这个问题？

演示：http://jsfiddle.net/92ptvf9h/20

【问题讨论】：

标签： angularjs ng-class

【解决方案1】：

你是对的，D1 上的ng-class 将把类应用到下一个$digest 周期。

我想不出比也推迟第二个指令编译更好的解决方案。

如果你没问题，你可以像这样使用$timeout 服务推迟编译：

post: function postLink(scope, iElement, iAttrs, controller) {
  console.log("First postLink width: " + iElement[0].clientWidth);

  $timeout(function () {
    var x = angular.element('<second></second>');
    iElement.append(x);
    $compile(x)(scope);
  }, 0);
}

JSFiddle: http://jsfiddle.net/7ba02otv/1/

希望这会有所帮助。

【讨论】：