从子控制器获取窗体状态到父控制器

Getting form state from child to parent controller

本文关键字：控制器 状态 获取 窗体      更新时间：2023-09-26

我是Angular的新手，我在父控制器和子控制器之间的通信方面遇到了困难。

jsfiddle在这里- http://jsfiddle.net/NEuJ6/35/

我正在做的是加载一个表单模板基于一个新的控制器路由。然而，父控制器有"保存并继续"按钮，我无法理解如何以子控制器(有效/无效状态)的形式将更改绑定到父控制器的按钮禁用状态。

简而言之，问题是在父控制器

中获取子控制器中表单的活动状态

我相信，这可以通过$watch解决，但我不确定如何进行。

控制器

<div ng-controller="MainCtrl">
  <ul>
    <li><a href="#/new">New User</a></li>
    <li><a href="#/edit">Edit USer</a></li>
    <li>To continue as guest, click on submit</li>
  </ul>
  <ng-view></ng-view>
    <button ng-click="save()">Save and continue</button>
</div>

路线

app.config( function ( $routeProvider ) {
  $routeProvider
  .when('/edit', {
      templateUrl: "form.html", 
      controller: "EditController"
  })
  .when('/new', {
      templateUrl: "form.html",
      controller: "NewController"
  })
});

第二个问题是关于加载过程的下一步。当用户单击submit并且表单有效时，在这种情况下，我想用新模板更改ng视图。是下面的东西推荐(在控制器)?

if (form.$valid) {
   location.path('/next')
}

或者我应该让继续按钮成为一个a标签然后像

<a href="#/next" ng-click="validate()">Save and continue</a>

在这两种情况下，我都将添加一条新路由。

 .when('/next', {
          templateUrl: "next.html", 
          controller: "NextController"
  })

没有内置的方法可以方便地从父控制器访问子控制器的状态。这也不是一个好的实践——父控制器不应该关心它有什么子控制器。

另一种方法很简单，这可能是最简单和最干净的方法:

  1. 让你的父控制器定义一个属性，根据它来启用/禁用按钮。
  2. 让任何子控制器根据其内部状态(例如表单的有效性状态)修改该属性。
    注意，为了让子控制器原型地继承属性，而不是在本地覆盖它，它不需要是一个原语(更多信息在这里)。

例如:

/* In parent-controller */
$scope.buttonConfig = {enabled: false};
/* In child-controller */
$scope.$watch('form.$valid', function (newValue) {
    $scope.buttonConfig.enabled = !!newValue;
});
这个<<p>看到,strong>修改演示。

<子>注意:
还有其他的选择(例如使用$rootScope来存储应用程序范围的状态，使用服务在控制器之间共享数据，使用范围消息传递( $scope.$emit() ， $scope.$on() )等)。

如果你想在控制器之间通信，那么我认为推荐的方法是使用服务。

服务被同时注入父控制器和子控制器中，那么子控制器就可以调用服务的setter方法来存储服务中的数据，而父控制器可以连接到服务的getter方法来检索数据。

你不需要去创建你可以使用值提供者的服务。

这种模式的好处是你减少了两个控制器之间的耦合，它们不依赖于彼此或共享知识，它们只知道它们应该有一个服务来提供来自子控制器的信息，或者它们应该有一个服务来放置数据。

请参考有关提供商的angular文档以获取示例实现https://docs.angularjs.org/guide/providers

你的问题与这个问题密切相关/重复

在AngularJS中控制器之间通信的正确方式是什么?

最初的答案围绕着在angular中使用事件模型——broadcast/emit，虽然这种模式的问题在angular的当前版本中得到了解决，但我仍然不得不同意那些更喜欢基于服务的解决方案的人。

相关文章：