カスタムディレクティブのリンク機能が呼び出され

Question

I次のディレクティブを持っている：

.directive("picSwitcher", ["$timeout", function($timeout){ 
return { 
    restrict: "A", 
    scope: { 
     pics: "=", 
     fadeTime: "@", 
     timeForPic:"@" 
    }, 
    template: '<img ng-repeat="pic in pics" src="{{pic.url}}" style="display: none"/>', 
    link: function ($scope, element){ 
       //some code... 
       $(element.find("img")[0]).css({display: "block"}); 
      } 
}; 
}]) 

私の問題は、私のリンク機能が呼び出されたときである - ngのリピートが（「コンパイル」するためにはまだ何語でここではコンパイルの代わりに使用するべきですか？）

私は定義されていないCSSを設定しようとしています。 ng-repeatが終了した後にリンク機能を強制的に実行するにはどうすればいいですか？今、私はそれが感じ$timeout(function(){ $(element.find("img")[0]).css({display: "block"});}, 200);

で$(element.find("img")[0]).css({display: "block"});を置き換えることによって、これを解決していますため

「ハック」

は、私は簡単な方法で自分の目標を達成するために行方不明です何かがあるのでしょうか？ 一般に、カスタムディレクティブのリンク関数内でng-repeat dom要素を操作する最善の方法は何ですか？

ありがとう、 ジミー。

Answer 1

あなたは、DOMのレンダリング後に実行された機能を行います$scope.$evalAsync

$scope.$evalAsync(function(){ 
    $(element.find("img")[0]).css({display: "block"}); 
} 

これを確認することができます。

また、$タイムアウトを使用すると、uは0

$timeout(function(){ 
    $(element.find("img")[0]).css({display: "block"});}, 
0); 

に遅延を設定した場合は悪いアイデアではありませんまた、私が思うトリックを行います。

より参照http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm

Answer 2

あなたはJQLiteの.ready()機能を使用することができます。

post: function postLink(scope, element) { 
     element.ready(function() { 
     //$(element.find("li")[0]).css({color: "red"}); 
     element.find("li:first-child").css({color: "red"}); 
     }); 
    } 

また、ディレクティブで要素を選択する方法も変更されました。 elementがあるので、JQLiteを使うことができます。ただし、CSSクラスを変更するには、CSSファイルで行う必要があります。

以下のスニペットでは、<img>を<ul><li>に置き換えましたが、イメージでも同じように動作します。多分

function myDirective() { 
 
    return { 
 
    template : '<ul><li ng-repeat="pic in pics">{{pic.name}}</li></ul>', 
 
    scope: { 
 
     pics: '=' 
 
    }, 
 
    link: function(scope, element) { 
 
     element.ready(function() { 
 
      //$(element.find("li")[0]).css({color: "red"}); 
 
      element.find("li:first-child").css({color: "red"}); 
 
     }); 
 
    } 
 
    } 
 
} 
 
function SuperController() { 
 
\t this.pics = [{name:"rob"}, {name:"jules"}, {name:"blair"}]; 
 
} 
 
angular.module('myApp', []); 
 
angular 
 
    .module('myApp') 
 
    .controller('SuperController', SuperController) 
 
    .directive('myDirective', myDirective);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="SuperController as s"> 
 
    <my-directive pics="s.pics"> 
 
    </my-directive> 
 
    </div> 
 
</div>