4

我有以下指令：

.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 repeat 尚未“编译”（这里应该使用什么词而不是编译？）

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

现在我通过替换来解决这个$(element.find("img")[0]).css({display: "block"});问题$timeout(function(){ $(element.find("img")[0]).css({display: "block"});}, 200);

但这感觉'hacky'

为了以更简单的方式实现目标，我还缺少什么吗？一般来说，在自定义指令的链接函数中操作 ng-repeat dom 元素的最佳方法是什么？

谢谢，吉米。

4

2 回答 2

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

于 2016-07-12T06:54:00.520 回答
1

您可以使用 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() {
	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>

于 2016-07-12T08:31:33.107 回答