Question

我正在Angular.JS中迈出第一步，并且当路由器视图中不再提供范围内的变量时，我遇到了问题。设置如下：

var vApp = angular.module('appG', ['ngRoute', 'appG.directives'])
  .config(function($routeProvider, $locationProvider) {
      $routeProvider
        .when('/', {templateUrl: '/partials/form.html', controller: 'ctrlMain'})
        .when('/welcome', {templateUrl: '/partials/welcome.html', controller: 'ctrlMain'})
        .otherwise({redirectTo: '/'});
  });

validationApp.controller('ctrlMain', function($scope, $http, $location) {

$scope.user = {};

$scope.submitForm = function () {
    $http.post('/signup', $scope.user). 
      success(function(data) {
          $location.url('/welcome');
      });      
};

$scope.submitData = function () {
    if ($scope.signupForm.$valid) {
        $scope.submitForm();
    } else {
        $scope.signupForm.submitted = true;
    }    
};

}）;

HTML code：

  <html ng-app="appG">
      <div ng-controller="ctrlMain">
         <ng-view></ng-view>   
      </div> 

  </html>

form.htm（只是其中的一部分）：

<form name="signupForm" id="signupForm" ng-submit="submitForm()" novalidate>
  <input type="text" class="text" ng-class="{'submit-error' : signupForm.submitted}" name="uFirst" placeholder="First name" ng-model="user.first" required/>
<a href="" class="native" ng-click="submitData()"><i class="fa fa-sign-in pull-left"></i>Submit</a>
</form>

welcome.html：

<p>{{user.first}}, thank you! </p>

部分form.html包含带有基本验证的表单代码，工作正常，部分welcome.html包含简单的

，其中包含{{user.first}}的文本（用户具有表单和名称的绑定）用户对象的属性。问题是{{user.first}}在welcome.html partial中总是空的。我很感激任何帮助，以弄清楚如何将$ scope.user的值传递给第二个部分。谢谢！

Answer 1

无论何时定义路径/控制器，都会创建新范围。您的两个控制器具有完全独立的$scope个对象。在这种情况下，他们被称为“兄弟”范围。即使您使用相同的控制器引用，ctrlMain中定义的变量也不会在welcome中可用。路由器实际上正在创建ctrlMain的新实例。

快速简便的解决方法是注入$rootScope并设置$rootScope.user而不是$scope.user。 $rootScope是一个特殊范围，是所有范围的父级。这些值将由整个应用程序中的所有子范围“继承”。

显然，效率并不高，通常不赞成，所以正确的方法通常是使用服务。您必须阅读有关创建服务的信息，然后您将注入该服务并在那里设置您的用户对象。实际上，您的HTTP内容也会进入服务。

Answer 2

我经常使用的一个选项，它遵循与大多数服务器端MVC框架（如Rails）相同的模式，创建一个名为“ApplicatonController”的控制器，并使用 在body标签上设置它。 NG-控制器= “ApplicationController中”
您的MainCtrl将加载到body标签内，因此它将继承在父控制器中找到的任何内容。

它叫做控制器嵌套。

你创建了一个名为“ApplicationController”的控制器，因为你有MainCtrl，除了现在你可以从MainCtrl中访问应用程序控制器中的属性和方法，而不需要像$ rootScope那样注入任何其他内容。

现在层次结构

$ rootScope - ＆gt; ApplicationController - ＆gt; MainCtrl

如果您熟悉遵循相同结构的Rails之类的框架，我发现这种方法更容易解决。

我还希望通过为所有内容创建服务来避免过度混淆，因为最终会出现巨大的依赖注入字符串，这会成为管理的麻烦。

控制器嵌套可能不会是最“角度”的方式，但它可以轻松解决您的问题。

在控制器之间共享数据

2 个答案: