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?

Jonathan Muller · Accepted Answer · 2013-11-05 10:51:12Z

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

edited Nov 5, 2013 at 10:51

answered Nov 5, 2013 at 10:18

Jonathan Muller

7,5442 gold badges26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GordyD Over a year ago

For clarity, you should remove $locationProvider as a dependency as it is not used in the example you provide.

tjfdfs Over a year ago

Hi, thanks for you answer. I know I can change template by this way. But I am considering if I can achieve this just using one directive. Anyway, this is one good way. thanks

Kos Prov · Accepted Answer · 2013-11-05 14:14:00Z

0

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.

answered Nov 5, 2013 at 14:14

Kos Prov

4,3031 gold badge21 silver badges14 bronze badges

4 Comments

tjfdfs Over a year ago

Is it not possible to achieve this using just one directive? using two directive will produce two code snippets and one of them isn't needed for each situation. And thank you :)

tjfdfs Over a year ago

thanks. Why you give a version using two directives while my version you fixed can work just one directive. Is it better to use two directives?

Kos Prov Over a year ago

There is no "better" way. You could use 1 directive like that or even 3 directives. It really depends on how complex each piece of functionality is. If something gets too complex you have to start breaking it into smaller pieces (e.g. separate login and logout directives). My objection on your original implentation was the use of jQuery. IMHO, it's something unecessary and more complex than it should.

tjfdfs Over a year ago

Thanks. your answer is great. sorry , no able to up vote for you.

Collectives™ on Stack Overflow

AngularJS: dynamic compile diretive

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related