Change template in ng-include on ng-click

Question

Im trying to load different template after user authenticated him self in same place where login form were. Ill probably figured out the problem, i think its because i am not working in same scope.

i have a property in scope named template which i change on user successfully logged in there is a problem to this approach since if i call AccountCtrl again template will be overridden with login template again:

var AccountCtrl = WorkerApp.controller('AccountCtrl', function ($scope, $location, AccountService) {

    $scope.template = 'Home/Template/login';

    $scope.Login = function () {
                    $scope.template = "Home/Template/register";
            };
        };
    }    
});

in my index.html i have some html outside of ng-view:

    <div class="container">
    <div class="header">
        <div class="loginView">
            <div ng-include="template" ng-controller="AccountCtrl"></div>
        </div>
    </div>
</div>

and my login template

  <form name="login" ng-controller="AccountCtrl">
        <button class="btn btn-primary btn-sm" ng-click="Login()">Login</button>
    {{template}}
</form>

Im quite new to Angular, and cant figure out which way will be the angular way to solve this problem. in my template i could remove ng-controller="AccountCtrl" but then i cant call to login function in controller (I've tested that).

maybe with small single cotes http://stackoverflow.com/questions/12521905/angularjs-ng-include-does-not-include-view-unless-passed-in-scope — Pedro Fillastre, Dec 27 '13 at 23:08

Joe · Accepted Answer · 2013-12-27T23:11:46.440

1

Keep track of whether the user is authenticated using the root scope and then you can just hide/show partial depending on that boolean.

angular.module('myApp', []).run(function($rootScope) {
  $rootSCope.isAuthenticated = false;
});

var AccountCtrl = WorkerApp.controller('AccountCtrl', function ($scope, $location, AccountService) {
  $scope.Login = function () {
    $scope.$root.isAuthenticated = true;
  };
};

var AuthenticatedCtrl = function() {
  // Whatever you want to do once authenticated.
};

And then:

<div class="container" ng-show="isAuthenticated">
  <div class="header">
    <div class="loginView">
      <div ng-include="Home/Template/register" ng-controller="AuthenticatedCtrl"></div>
     </div>
  </div>
</div>

<form name="login" ng-controller="AccountCtrl"
  ng-hide="isAuthenticated"
  ng-include="Home/Template/login">
  <!-- The template should include a button that calls $scope.Login, obviously. -->
</form>

edited Dec 27 '13 at 23:11

answered Dec 27 '13 at 23:03

Joe

2,596
2
14
11

with slight adjustments ive got it to work, didnt even thought of ng-show and ng-hide. and bind them to same property – Timsen Dec 27 '13 at 23:45
Just curious. What will happen if someone will open the console in browser and write: `$scope.$root.isAuthenticated = true;`? – Ronen Jul 04 '14 at 20:24
@Ronen That is always a real possibility when doing any frontend auth, which is why nothing truly compromising should be available to them. If you want to do things right, there should be some sort of auth token passed back from the server that will be sent with any subsequent ajax request for actual data. – Joe Aug 06 '14 at 18:52

score 1 · Answer 2 · answered Dec 27 '13 at 23:04

The way your code is presently, AccountCtrl will be created twice. Two separate instances will be created because you are declaring it twice on the page (Once, the template is loaded into ng-include). This will have the effect of the default value for tempalte to be originally set to login. So, I think, you are not seeing the template field resetting, but instead seeing a new controller setting the default value.

So, you could solve this problem a couple of different ways.

However, I think the best way would be to separate the logic of selecting a template from the logic of the registering or login. So, you might just need a few different controllers. Then, the top-level controller would be responsible for transitioning the templates for ng-include and that is all.

Another way would be to reference the top-level template inside the ng-include. ng-include creates a child scope (from version 1.2). So, in this solution you would not need to define the AccountCtrl inside login template. Instead you could reference the template using $scope.$parent.template instead.

thanks for answer, u've got me an idea to refactor some of my code — Timsen, Dec 27 '13 at 23:49

Change template in ng-include on ng-click

2 Answers2