7

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">&#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>
4

1 に答える 1