I'm building a simple angularjs app and I'm trying to implement login without page refresh.
What I'm doing
On init the ng-include loads the /set/save. The /set/save got the <a fblogin>Login with Facebook</a>
in it. So when clicked the directive opens a window and when the window is closed it should change the src of the ng-include.
The problem
When the directive is used inside the ng-include ( ng-include src has default value on init ), nothing happens ( no errors in console, just nothing ), but when I put the directive outside the ng-include it's working 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's not working
<ng-include src="saveTemplate"></ng-include>
<a class="close-reveal-modal">×</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>
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-model directive can also: Provide type validation for application data (number, email, required). Provide status for application data (invalid, dirty, touched, error). Provide CSS classes for HTML elements.
AngularJS has a built-in directive to include the functionality from other AngularJS files by using the ng-include directive. The primary purpose of the ng-include directive is used to fetch, compile, and include an external HTML file in the main AngularJS application.
AngularJS ng-show DirectiveThe ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.
Here is a working plunker: http://plnkr.co/edit/ilVbkHVTQWBHAs5249BT?p=preview
fblogin
outside of ngInclude
it's on the same scope of the controller.ngInclude
always creates a new child scope so any directive inside it is on a child scope
.Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope.
It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works.
New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved.
This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models.
What happens in your case is that scope.saveTemplate = '/set/continue';
just create a variable on the child scope which shadows scope.saveTemplate
of the parent scope (controller).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With