Directives inside ng-include

Question

I am creating a simple angularjs application and I am trying to embed a login without refreshing the page.

What am I doing

On startup, ng-include loads /set/save./Set/save got <a fblogin>Login with Facebook</a> in it. Therefore, when you click this directive, a window opens, and when the window closes, it should change src ng-include.

Problem

When the directive is used inside ng-include (ng-include src has a default value for init) nothing happens (there are no errors in the console, just nothing), but when I put the directive outside of ng-include, it works fine (see HTML code below)

HTML:

 <div id="set-creator" ng-controller="SetCtrl"> ........ <div id="saveModal" class="reveal-modal" data-reveal> <a href fblogin>testCase</a> // ^this is working //but if the directive is inside ng-include, it not working <ng-include src="saveTemplate"></ng-include> <a class="close-reveal-modal">&#215;</a> </div> </div> 

Directive

 App.directive('fblogin', function() { return { transclude: false, link: function(scope, element, attrs) { element.click(function() { var win = window.open("/auth/facebook", 'popUpWindow', 'centerscreen=true'); var intervalID = setInterval(function() { if (win.closed) { scope.saveTemplate = '/set/continue'; scope.$apply(); clearInterval(intervalID); } }, 100); }); } }; }); 

Controller:

 App.controller("SetCtrl", ["$scope", "SetHolder", function($scope, SetHolder) { $scope.saveTemplate = '/set/save'; $scope.test = "loaded"; } ]); 

And / set / save

 You need to be logged in order to save the set. <br /> <a fblogin>Login with Facebook</a> 

Answer 1

Here is the working plunker: http://plnkr.co/edit/ilVbkHVTQWBHAs5249BT?p=preview

You are bitten using a primitive value in an area.

• When you put fblogin outside ngInclude in the same controller scope.
• ngInclude always creates a new child scope, so any directive inside it is on a child scope .

From General Information on Views:

Inheritance of domains is usually simple, and you often don’t even need to know that this happens ... until you try to bind two-way binding (i.e. form elements, ng-model) to a primitive (e.g. number, string, boolean) defined in the parent area from within the content area.

This does not work the way many people expect it to work. It happens that the child region gets its own property, which hides / obscures the parent property with the same name . This is not what AngularJS does - this is how prototype JavaScript inheritance works.

New AngularJS developers often don’t realize that ng-repeat, ng-switch, ng-view and ng-include all create new child areas , so the problem often arises when these directives are involved,

This problem with primitives can easily be avoided by following the "best practice" to always have "." . in your ng models .

What happens in your case is that scope.saveTemplate = '/set/continue'; just creates a variable on the child area that shadows the scope.saveTemplate parent area (controller).