Question

我认为我遇到了无法修复的范围问题，这是对我的问题的解释。

我想创建自己的指令“my-create-content”，在已定义指令的元素中插入“img”HTML模板。然后，我在“img”中定义了ng-show，并将ng-show评估为false的超时，但是超时后“img”元素没有被隐藏。如果这是一个范围问题我不是因为ng-src =“{{imageUrl}}”它被正确评估了。

这是我的代码：

.directive('myCreateContent', [function() {

function link(scope, element, attrs) {

  scope.showImg = false;

  function updateImg(url){
    scope.imageUrl = url;
    scope.showImg = true;
  }

  if (scope.grid[0].image){
    updateImg(scope.grid[0].imageUrl);
    setTimeout(function(){
      scope.showImg = false;
    }, scope.grid[0].duration);
  }

}

return {
  scope: {
    grid: '='
  },
  template: '<img ng-show="showImg" ng-src="{{imageUrl}}" class="grid">',
  link: link
};
}]);

HTML：

<div my-create-content grid="grid" class="container">

Answer 1

您需要为AngularJS调用$apply以了解范围变量已更改。

在这种情况下，您应该使用setTimeout来代替使用$timeout而不是{{1}}。

在此处阅读更多内容：$timeout service

Answer 2

你必须使用$timeout，因为它确保它会被消化并因此被渲染。

您也可以在setTimeout中使用$apply，但这不是最佳选择，因为如果AngularJS已经在消化，您可能会触发一些javascript错误

我把你的代码放在jsfiddle上：

http://jsfiddle.net/g07stzdk/3/

阅读你的代码，我认为你正在研究旋转木马。如果这是正确的，那么您的代码的正确函数将是：$interval，相当于普通javascript中的setInterval

Angularjs自定义指令ngShow不会触发

2 个答案: