AngularJS: dynamic compile diretive

Question

Here's the [plunker]:http://plnkr.co/edit/iPsyEAIQWxJIJuneZb8B?p=preview

What I want is when I click login, the auth directive should change template to 'logout.html' automatically , and then when logout clicked, switch to use 'login.html'. But so far, I should refresh page manully to make directive to switch template.

How can I achieve this purpose?

Answer 1

Using routes.

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/login', {
            templateUrl: 'login.html',
            controller: 'loginCtrl'
        })
        .when('/logout', {
            templateUrl: 'logout.html',
            controller: 'logoutCtrl'
        })
}]);

Then you do $location.path('/logout') or $location.path('/login')

Here is the tutorial: http://docs.angularjs.org/tutorial/step_07

Answer 2

I've fixed a couple of bugs in your plunker. Check it out here

Your major error was the $watch expression. It should be scope.$watch('authed', function () {}); not scope.$watch(scope.authed, function () {});.

I've also played a bit with it and came up with this version. The idea is to separate logon/logout logic with cookie manipulation and get rid of explicit DOM manipulation, $compile() etc.