2

次の Angular バインディング設定があります。

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

ご覧のとおり、アイテムのリストにバインドし、内側の div 背景をバインドし、カスタム ディレクティブ 'app-shadow' も持っています。

私のディレクティブのコードは次のとおりです。

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")親要素の背景色を決定するために使用します（上記のソースリンクの22行目）。

私の問題は、親 bgcolour が評価されるときに、Angular がバインドしたものではないことです。2 つのディレクティブの間に競合状態があると思います。

ng-styleカスタムディレクティブの前にディレクティブが評価されるようにするためにできることはありますか?

前もって感謝します。

4

2 に答える 2

3

これは、おそらく競合状態が原因で実際​​に発生しており、コードを に配置すると、強制的に 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>
于 2013-11-14T17:29:47.357 に答える
1

親と子の間でコンパイル、postLink、および preLink が実行される順序をコンソール ログで確認できるデモを作成しました。この例では、両方とも にアクセスできますscopeが、親ロジックが子ロジックの前に実行されていることがわかります。これが目的のようです。

ライブデモ (クリック)。

このディレクティブを使用して、自然に見え、より拡張可能な時計を確立します。それ以外の場合は、次のように実行後/実行前の順序を使用します。

<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);
        }
      };
    }
  };
});
于 2013-11-14T18:24:34.097 に答える