更改ng-include中的ng-include模板

Question

我试图加载不同的模板后,用户在登录表单所在的同一个地方验证了他自己.我可能想出了问题,我认为这是因为我不在同一范围内工作.

我有一个名为模板的属性,我在用户成功登录时更改了此方法存在问题,因为如果我AccountCtrl再次调用模板将再次使用登录模板覆盖:

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

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

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

在我的index.html中,我在 ng-view 之外有一些html :

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

和我的登录模板

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

我对Angular很新,并且无法找出解决这个问题的方法.在我的模板中我可以删除,ng-controller="AccountCtrl"但后来我无法调用控制器中的登录功能(我已经测试过).

Answer 1

跟踪用户是否使用根范围进行身份验证，然后您可以根据该布尔值隐藏/显示部分内容。

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.
};

进而：

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