AngularJS 指令绑定答案

【问题标题】：AngularJS Directive BindingAngularJS 指令绑定
【发布时间】：2013-03-20 15:29:25
【问题描述】：

我一直在尝试影响父作用域中的变量以从指令内部切换 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 何时完成？

【问题讨论】：

我可以帮助设置父值。我在指令中设置值时遇到了同样的问题。 stackoverflow.com/questions/16494457/…

标签： javascript jquery angularjs

【解决方案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 将不存在。

【讨论】：

【解决方案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。

【讨论】：