AngularJS指令绑定

AngularJS Directive Binding

本文关键字：绑定 指令 AngularJS      更新时间：2023-09-26

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

这是一个普朗克演示我的情况: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重复何时结束?

在你的指令中，你需要在scope.$apply()中包装scope.$parent.showMe = false;:

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

这是因为你在Angular之外改变了一个Angular属性的值(你的jQuery函数)，所以Angular不知道scope.showMe已经改变了。

你的指令与你的ngRepeat在同一个标签中，你不能使用一个孤立的作用域，因为它会删除你的ng-repeat="httpMessage in messages"的绑定。换句话说，如果在这里隔离作用域，httpMessages将不存在。

我会将隐藏/显示逻辑和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');               
        });
    }
};
});

相关文章：