4

Ich habe die folgende Anweisung:Link-Funktion der benutzerdefinierten Richtlinie wird aufgerufen, bevor ng-repeat replcaed ist

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

mein Problem ist, wenn meine Link-Funktion aufgerufen wird - ng Wiederholung noch zu „übersetzen“ (was für Wort sollte hier statt kompiliert verwendet werden?)

also ich versuche css von undefined zu setzen .. wie kann ich erzwingen die Link-Funktion nach ng-repeat fertig laufen ?!

für jetzt ich dies lösen, indem $(element.find("img")[0]).css({display: "block"}); mit $timeout(function(){ $(element.find("img")[0]).css({display: "block"});}, 200);

ersetzt aber das fühlt sich ‚Hacky‘

ist es etwas, was ich bin fehlt mein Ziel in einen einfacheren Weg zu erreichen? im Allgemeinen, was ist der beste Weg, ng-Repeat dom-Element innerhalb der Link-Funktion einer benutzerdefinierten Anweisung zu manipulieren?

Danke, Jimmy.

+0

vielleicht, wenn Sie die Vorlage in der html und nicht in der Richtlinie entspricht tun wird es funktionieren? – Erez

Antwort

1

können Sie $scope.$evalAsync

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

die Funktion nach dem dom-Rendering ausgeführt Dadurch werden überprüfen.

Auch $ timeout verwendet, ist keine schlechte Idee, wenn u die Verzögerung auf 0

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

auch den Trick tun Ich denke, gesetzt.

Weitere Referenz http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm

+0

Danke, nach Ihrer Referenz, in meiner Situation ist es besser, die $ evalAsync-Methode zu verwenden :) aber ich bin froh zu sehen, dass ich nicht sehr falsche Dinge tat. Prost. – JimmyBoy

0

können Sie JQLite die Verwendung .ready() Funktion.

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

Ich änderte auch die Art, wie Sie Elemente in Ihrer Richtlinie auswählen. Da Sie element verfügbar haben, können Sie einfach JQLite verwenden. Um jedoch nur eine CSS-Klasse zu ändern, sollten Sie dies in einer CSS-Datei tun.

In dem Schnipsel unten ersetzte ich durch <ul><li>, aber es funktioniert das gleiche für Bilder.

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>

+0

Jemand hat diese Antwort abgelehnt? Grund? – gyc

+0

scheint so zu sein. weiß nicht warum! Danke für die Antwort :) – JimmyBoy