AngularJS-不同的行为取决于我第一次输入的内容

AngularJS - different behaviours depending on in which input first I typed

本文关键字：输入 第一次 AngularJS- 取决于      更新时间：2023-09-26

这是我从本教程中获得的：

http://egghead.io/lessons/angularjs-the-dot

<!DOCTYPE html>
<html>
<head>
  <title>AngularJS Tutorials</title>
  <link rel="stylesheet" href="vendor/foundation/foundation.min.css">
</head>
<body>
  <div ng-app="">
    <input type="text" ng-model="data.message">
    <h1>{{data.message}}</h1>
    <div ng-controller="FirstCtrl">
      <input type="text" ng-model="data.message">
      <h1>{{data.message}}</h1>
    </div>
    <div ng-controller="SecondCtrl">
      <input type="text" ng-model="data.message">
      <h1>{{data.message}}</h1>
    </div>
  </div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

Main.js

function FirstCtrl($scope){
}
function SecondCtrl($scope){
}

现在加载页面。若我尝试在第一个输入字段中输入数据，它会更新所有h1标记和其他输入字段。在第二个或第三个输入字段中输入数据时也会发生同样的情况。

现在，如果我们刷新页面并首先在第二个输入字段中输入数据则它只更新第二个h1标签。我不喜欢——同一个代码的不同结果。为什么这取决于用户的行为，他首先做了什么？这可能会导致很多错误。

这是因为变量data没有在作用域中的任何地方定义，而是在您第一次编辑它的最顶端作用域中创建的。

对比一下这个例子：http://plnkr.co/edit/mqtPaMsH2xVMJaW3mEkX?p=preview

这里的控制器是：

function FirstCtrl($scope){
}
function SecondCtrl($scope){
}
function RootCtrl($scope) {
  $scope.data = {};
}

模板是：

<div ng-controller="RootCtrl">
  <input type="text" ng-model="data.message" />
  <h1>{{data.message}}</h1>
  <div ng-controller="FirstCtrl">
    <input type="text" ng-model="data.message" />
    <h1>{{data.message}}</h1>
  </div>
  <div ng-controller="SecondCtrl">
    <input type="text" ng-model="data.message" />
    <h1>{{data.message}}</h1>
  </div>
</div>

这里，由于我在最上面的作用域上显式定义了data变量，因此它不再在FirstCtrl或SecondCtrl的作用域中创建。但是，如果我省略了RootCtrl上的定义$scope.data = {}，它将在需要定义的最顶层作用域上创建，而不一定在RootCtrl的作用域上。如果您在RootCtrl的作用域上编辑data.message，它将被任何没有它的作用域重新创建和继承。

查看GitHub上的开发人员指南，了解有关范围继承的更详细解释。在控制器之间。

这是作用域继承行为。当angular遇到ng控制器时，它将创建一个新范围，继承自当前范围。

在您的示例中，有FirstCtrl的范围和SecondCtrl的范围，它们都继承自rootScope，并且彼此隔离。

如果我尝试在第一个输入字段中输入数据，它会更新所有h1标记以及其他输入字段。

在这种情况下，它将在rootScope上创建/更新data.message（因为它不在ng控制器内），这是由FirstCtrl的作用域和SecondCtrl的作用区继承的，因为在您的代码中，data.message不存在于FirstCtrl和SecondCtrl的范围中。

现在，如果我们刷新页面并首先在第二个输入字段中输入数据则它只更新第二个h1标签。

在这种情况下，它将在FirstCtrl的作用域上创建/更新data.message。rootScope和SecondCtrl的scope不知道此更新。

相关文章：