层叠角指令

Question

我有以下的角装订设置：

<div ng-repeat="app in vm.Apps"> 
    <div ng-style="{ background: app.bgColour }">   
     <p app-shadow="large"></p> 
    </div>  
</div> 

正如你所看到的，我结合项目清单，结合内部DIV背景，也有一个自定义的指令“应用-阴影'。

的代码为我的指令是：

function addShadowDirective($document) { 
    return function (scope, element, attr) { 
     $(element).iluminate(
      { size: 64, textSize: 30, alpha: 0.5, textAlpha: 0.2, fade: 0, fadeText: 0, includeText: false, textOnly: true, direction: "bottomRight" }); 
    }; 
} 

的appShadow指令依赖于现有的js库（jQuery Illuminate），其使用给定的元素的父背景色。它使用JQuery.css("background-color")来确定父元素的bg颜色（上面源链接的第22行）。

我的问题似乎是，当父bgcolour被评估时，它不是Angular绑定的东西。我猜这两个指令之间存在竞争条件。

我能做些什么来确保ng-style指令在我的自定义指令之前被评估？

在此先感谢。

Answer 1

确实发生这种情况的原因可能是因为竞争条件，并且将代码放入$timeout(..., 0)可能会通过强制延迟一个$digest循环来解决。

但是，如果app.bgColour更改后您的app-shadow指令也已初始化，则这可能会继续存在问题。

在这种情况下，最好的解决方法通常是先建立一个$watch你取决于属性：

link: function (scope, elem, attrs) { 
     // ... 
     scope.$watch(attrs.color, function (newVal) { 
      if (typeof newVal !== 'undefined') { 
       var color = newVal; 
       // ... 
      } 
     }); 
} 

模板：

<p app-shadow="large" color="app.bgColor"></p> 

Answer 2

我做了一个演示中，你可以检查控制台登录以查看编译的顺序，postLink和preLink将在父级和子级之间运行。在这个例子中，你可以看到两者都可以访问scope，但父逻辑在子逻辑之前运行，这似乎是你的目标。

Live demo (click).

我会使用指令建立一个手表，这很自然，更可扩展性。 否则，我会使用post/pre execution命令，如下所示：

<div parent>Should be red.   
    <p child>Should be green.</p> 
</div> 


var app = angular.module('myApp', []); 

app.controller('myCtrl', function($scope) { 
    $scope.bkgr = 'red'; 
    $scope.bkgr2 = 'green'; 
}); 

app.directive('parent', function() { 
    return { 
    compile: function(element, attrs) { 
     console.log('parent compile'); 
     return { 
     pre: function(scope, element, attrs) { 
      console.log('parent pre'); 
      element.css('background-color', scope.bkgr); 
     }, 
     post: function(scope, element, attrs) { 
      console.log('parent post'); 
     } 
     }; 
    } 
    }; 
}); 

app.directive('child', function() { 
    return { 
    compile: function compile(element, attrs) { 
     console.log('child compile'); 
     return { 
     pre: function preLink(scope, element, attrs) { 
      console.log('child pre'); 
     }, 
     post: function postLink(scope, element, attrs) { 
      element.css('background-color', scope.bkgr2); 
     } 
     }; 
    } 
    }; 
});