Angularjs：在 ui 中绑定 - 路由嵌套状态不起作用

Question

我的应用程序配置中有这些状态：

 ...
 .state('register', {
    templateUrl: 'views/register/register.html',
    controller: "registerCtrl"
  })
  .state('register.step-one', {
    url: "/register.one",
    templateUrl: "views/register/register.one.html",
    controller: "registerOneCtrl"
  })
  .state('register.step-two', {
    url: "/register.two",
    templateUrl: "views/register/register.two.html",
    controller: "registerTwoCtrl"
  })

我的主控制器是这个registerCtrl:

$scope.studies = [];
$scope.newStudy = "dd";

$scope.addStudy = function (studyName) {
  $scope.studies.push({
    title: studyName
  });
  console.log($scope.newStudy); //This prints empty
  $scope.newStudy = "AAAAA"; //this doesn't seem to work :(
  console.log($scope.newStudy);
}

我的 register.two 模板中有这个：

<div class="container-fluid  margin-top-md">
  <input type="text" ng-model="newStudy"/>
  <i class="fa fa fa-plus-square" ng-click="addStudy(newStudy)"></i>
  <ul>
    <li ng-repeat="study in studies">
      <input type="text" ng-model="study.title"/>
    </li>
  </ul>
</div>

现在，这不能正常工作，因为添加研究后，我想更新我的 newStudy 输入字段，但是，我无法这样做，因为该变量似乎不会影响我的模板.

如果我将我的控制器代码放在 registerTwoCtrl 中，那么它工作正常。如何使用单个控制器（父控制器）完成这项工作？

谢谢！

Answer 1

这是未能使用 ng-model 黄金经验法则的经典案例：

Always have a "." in your ng-model expression

如果您将 newStudy 存储为 registerCtrl 中 $scope 上对象的属性，它将正常工作。

例如

在registerCtrl:

$scope.data = { newStudy: "AAAA" }; // instead of $scope.newStudy = "AAAA";

在模板中，将其更改为：

<div class="container-fluid  margin-top-md">
  <input type="text" ng-model="data.newStudy"/>
  <i class="fa fa fa-plus-square" ng-click="addStudy(data.newStudy)"></i>
  <ul>
    <li ng-repeat="study in studies">
      <input type="text" ng-model="study.title"/>
    </li>
  </ul>
</div>

一个可能更好的选择是使用 controller as 语法。查找它，它将有助于消除这些类型的错误，因为您将在 ng-model 表达式中引用 registerCtrl.newStudy 而不仅仅是 newStudy。

Angularjs：在 ui 中绑定 - 路由嵌套状态不起作用

Angularjs: Binding in ui-routing nested state not working

javascript

angularjs

angular-ui-router