定製指令的鏈接函數被調用

Question

我有以下指令：

.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"}); 
      } 
}; 
}]) 

我的問題是，當調用我的鏈接功能 - 納克重複尚未「編譯」（什麼詞應該用在這裏，而不是編譯？）

所以我想設置未定義的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

，您可以檢查$scope.$evalAsync

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

這將使DOM渲染之後執行的功能。

此外，使用$超時是不是一個壞主意，如果ü延遲設置爲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>