javascript - Change template in ng-include on ng-click - Stack Overflow

admin管理员组

文章数量:1024582

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

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

• javascript
• angularjs

Share Improve this question Follow edited Dec 27, 2013 at 23:02 Timsen asked Dec 27, 2013 at 22:49 TimsenTimsen 4,1361010 gold badges6464 silver badges121121 bronze badges 1

• maybe with small single cotes stackoverflow./questions/12521905/… – Pedro Fillastre Commented Dec 27, 2013 at 23:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>

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.

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

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

• javascript
• angularjs

Share Improve this question Follow edited Dec 27, 2013 at 23:02 Timsen asked Dec 27, 2013 at 22:49 TimsenTimsen 4,1361010 gold badges6464 silver badges121121 bronze badges 1

• maybe with small single cotes stackoverflow./questions/12521905/… – Pedro Fillastre Commented Dec 27, 2013 at 23:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>

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.

本文标签： javascriptChange template in nginclude on ngclickStack Overflow