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).

Answer 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>

Answer 2

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.