Question

我想知道是否有人可以解释这个角度测试应用程序的行为。

在html中，我在控制器1内部有控制器2.

当我点击＆＃34;点击我1＆＃34;没有点击＆＃34;点击我2＆＃34;，$ scope.message的控制器2收到＆＃34;点击1＆＃34;值。

然后，我点击＆＃34;点击我2＆＃34;。现在，如果我点击＆＃34;点击我1＆＃34;再一次，控制器2的$ scope.message将不会收到＆＃34;点击1＆＃34;价值了。

我有一个理论，但想听听专家的意见。

感谢。

＆＃13;

var app = angular.module("myApp", []);
app.controller("controller1", function($scope, $http, $filter) {
  $scope.message = "clicked none";
  $scope.clicked = function() {
    $scope.message = 'clicked 1';
  };
});


angular.module("myApp").controller('controller2', function($scope) {
  vm = this;
  vm.clicked = clicked;

  function clicked() {
    $scope.message = 'clicked 2';
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="controller1">
    <div>
      i'm in c1 {{ message}}
      <button type="button" ng-click='clicked()'>Click Me c1!</button>

      <div ng-controller="controller2 as c2">
        i'm in c2 {{ message }}
        <button type="button" ng-click='c2.clicked()'>Click Me c2!</button>
      </div>
    </div>
  </div>

＆＃13;

Answer 1

在AngularJS中，内部控制器从父控制器继承，如果按照您的方式使用，它们将继承所有属性。

因此，在您的示例中，这就是正在发生的事情：

controller2继承controller1的所有属性，因为它位于controller1
一开始，没有任何范围具有message属性，因此未定义
当您点击第一个按钮时，controller1的属性message也会从controller2继承（因此两者都会显示消息值）
当您点击第二个按钮时，controller2会覆盖该属性，从而创建其属性message
从这里开始，两个控制器都有message属性，但controller2已在其范围内覆盖了此属性，因此它不再显示controller1的值的属性，即使您再次单击第一个按钮

您可以使用以下方法对其进行验证：

首先点击第二个按钮。 controller2的财产为message
父级无法访问子级的属性，因此message父级属性仍未定义
点击第一个按钮，您会看到第一个值也已分配给controller1，但未更改controller2

我希望这是有道理的

Answer 2

它是所希望的行为，因为一旦你在子控制器内的scope变量中进行了更改，它就会在（它自己的）父级无法访问的单独范围内创建。但是孩子仍然可以访问父母的范围。因此，在第二个控制器中单击按钮后，值不会发生变化。有一个＆＃39;。＆＃39;在您的模型中将确保prototypal inheritance正在发挥作用。因此它不会创建自己的属性版本。查看Understanding scope以获取有关范围，继承如何在angularjs中工作的详细信息。

并查看此plunker示例，使用＆＃39;来解决您的问题。＆＃39;在模型中

控制器2将仅从控制器1接收一次值。为什么？

2 个答案: