在 ng-click 上更改 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>

Answer 2

按照您目前的代码方式，AccountCtrl 将被创建两次。将创建两个单独的实例，因为您在页面上声明了两次（一次，模板被加载到ng-include）。这将使tempalte 的默认 值最初设置为login。所以，我认为，您没有看到 template 字段重置，而是看到一个新的控制器设置了默认值。

因此，您可以通过几种不同的方式解决此问题。

但是，我认为最好的方法是将选择模板的逻辑与注册或登录的逻辑分开。因此，您可能只需要几个不同的控制器。然后，顶级控制器将负责为ng-include 转换模板，仅此而已。

另一种方法是引用ng-include 中的顶级模板。 ng-include 创建一个子作用域（从 1.2 版开始）。因此，在此解决方案中，您无需在 login 模板中定义 AccountCtrl。相反，您可以使用 $scope.$parent.template 来引用模板。