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

我的问题是，当调用我的链接函数时 - 还没有重复＆＃34;编译＆＃34; （这里应该使用哪个单词而不是编译？）

所以我试图设置未定义的CSS 如何在ng-repeat完成后强制链接功能运行？！

目前我正在通过将$(element.find("img")[0]).css({display: "block"});替换为$timeout(function(){ $(element.find("img")[0]).css({display: "block"});}, 200);

来解决此问题

但感觉＆hacky＆＃39;

是否有一些我想要以更简单的方式实现目标的东西？一般来说，在自定义指令的link函数中操作ng-repeat dom元素的最佳方法是什么？

谢谢，麦。

Answer 1

您可以查看$scope.$evalAsync

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

这将使dom渲染后执行该功能。

另外，如果你将延迟设置为0

，使用$ timeout也不是一个坏主意

$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的@insurer.offices.includes(:city).order('cities.name asc')函数。

.ready()

我还改变了你在指令中选择元素的方式。由于您有post: function postLink(scope, element) { element.ready(function() { //$(element.find("li")[0]).css({color: "red"}); element.find("li:first-child").css({color: "red"}); }); }可用，因此您可以使用JQLite。但是，要更改css类，您应该在CSS文件中执行此操作。

在下面的代码段中，我将element替换为<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() {
	this.pics = [{name:"rob"}, {name:"jules"}, {name:"blair"}];
}
angular.module('myApp', []);
angular
    .module('myApp')
    .controller('SuperController', SuperController)
    .directive('myDirective', myDirective);

重定位ng-repeat之前调用自定义指令的链接函数

2 个答案: