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中，我有一些html 的ng-view：

    <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字段重置，而是看到新控制器设置默认值。

所以，你可以通过几种不同的方式解决这个问题。

但是，我认为最好的方法是将选择模板的逻辑与注册或 login 的逻辑分开。所以，你可能只需要一些不同的控制器。然后，顶级控制器将负责转换ng-include的模板，这就是全部。

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

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

2 个答案: