Question

我一直试图影响父作用域中的变量来从指令内部切换ng-show。该指令是包含ng-repeat指令的自定义指令。这个想法是，一旦ng-repeat完成，我想隐藏包含div以及它内部的元素。

这是一个Plunkr演示我的情况：http://beta.plnkr.co/edit/C42Z25?p=preview 这里也是JSFiddle中的一个比较，它使用相同的问题，但它不是ng-repeat，所以它可以工作：http://jsfiddle.net/dyzPC/

所以有几个问题。在我的指令中，我必须使用scope.$parent.showMe = true更改父作用域的showMe，我似乎无法使用scope.showMe = true来设置它。我尝试使用隔离范围，没有范围，真正的范围，似乎没有任何效果。

此外，在jquery回调函数中，我似乎无法将父作用域showMe重置为scope.$parent.showMe = false。这可以防止我在有内容时显示包含div，并在没有内容时隐藏它。

另一方面，最后一个问题是使用$last。在plunkr示例中，使用$ last是可能的，但在我的实际代码中，ng-repeat集合正在从HTTP响应拦截器填充。这似乎阻止使用$ last，因为所有元素最终都为$last = true。还有另一种检测ng-repeat完成时间的方法吗？

Answer 1

在您的指令中，您需要将scope.$parent.showMe = false;包裹在scope.$apply()：

中

scope.$parent.showMe = true; //this one works
element.hide().fadeIn('fast').delay(2000).fadeOut('slow', function(){
   scope.$apply(function(){
      scope.$parent.showMe = false;
   });
});

这是因为您正在更改Angular（您的jQuery函数）之外的Angular属性的值，因此Angular不知道scope.showMe已更改。

您的指令与ngRepeat位于同一标记中，您不能使用隔离范围，因为它会删除ng-repeat="httpMessage in messages"的绑定。换句话说，如果您在此处隔离范围，则httpMessages将不存在。

Answer 2

我将隐藏/显示逻辑和ng-repeat向下移动到指令中，然后让控制器通过指令的属性向指令提供消息列表。

app.directive("hideShow", function() {
return {
    restrict: 'E',
    template: 
    "<div ng:repeat='message in messages'>" +
    "  <em>{{message.message}}</em> " +
    "</div>",
    scope: {
        messages: "="
    },
    link: function(scope, element, attrs) {
        element.hide();
        scope.$watch("messages", function() {
            element.fadeIn('fast').delay(1000).fadeOut('slow');               
        });
    }
};
});

这是working Fiddle。

AngularJS指令绑定

2 个答案: