AngularJS Angle Snapping

Question

I am trying to affect a variable in the parent scope to switch ng-show from inside the directive. A directive is a custom directive containing the ng-repeat directive. The idea is that after ng-repeat completes, I want to hide the contained div, as well as the elements inside it.

Here Plunkr demonstrates my situation: http://beta.plnkr.co/edit/C42Z25?p=preview Also here is a comparison in JSFiddle that uses the same problem but it is not ng-repeat and therefore it works: http: / /jsfiddle.net/dyzPC/

So there are a few problems. Inside my directive I have to use scope.$parent.showMe = true to change the showMe parent area, I cannot just use scope.showMe = true to set it. I tried with selection areas, without areas, true areas, nothing works.

Also, in the jquery callback function, I cannot represent the reset showMe parent area as scope.$parent.showMe = false . This prevents me from showing the contained div when there is content and hiding it when there is no content.

On the one hand, one of the last problems is the use of $last . In the plunkr example, using $ last is possible, but in my real code, the ng-repeat collection is populated from an HTTP interceptor. This seems to prevent the use of $ last, since all elements end as $last = true . Is there any other way to detect when ng-repeat is complete?

Answer 1

In your directive you need to wrap scope.$parent.showMe = false; in 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; }); }); 

This is because you are changing the value of the Angular property outside of Angular (your jQuery function), so Angular does not know that scope.showMe has changed.

The directive is in the same tag as your ngRepeat , you cannot use the selection area because it will remove the binding for your ng-repeat="httpMessage in messages" . In other words, httpMessages does not exist if you httpMessages area here.

Answer 2

I would move the hide / show and ng-repeat logic down to the directive, and then let the controller feed the message list directive through the attributes of the directive.

 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'); }); } }; }); 

Here is a working script .