Question

56

Change template in ng-include on ng-click

rated 0 times [ 59] [ 3] / answers: 1 / hits: 6192 / 11 Years ago, fri, december 27, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

paola

Add To Favorites

Follow

Total Points: 675

Total Questions: 115

Total Answers: 95

Location: Laos

Member since Tue, Jul 7, 2020

4 Years ago

answered 11 Years ago harleyaleenag · Accepted Answer

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>