angularjs - 使用 'controller as' 语法将对象值传递给父 Controller

Question

当使用 $scope Controller 语法时，在父 Controller 的对象上设置一个值很简单。例如

<div ng-controller="ParentController">
    {{myValue.a}}
    <div ng-controller="ChildController">
        {{myValue.a}}
    </div>
</div>

app.controller('ParentController', function($scope) {
    $scope.myValue = {};
    $scope.myValue.a = 1;
});
app.controller('ChildController', function($scope) {
    $scope.myValue.a = 2;
});

以上输出:

2
2

有没有办法在不引用子 Controller 中的 $scope 的情况下使用 controller as 语法实现相同的功能？

Answer 1

您可以使用服务来完成，也可以通过引用范围来完成。

您正在使用的行为，范围继承，通常被称为不需要的副作用。这就是隔离作用域与 controllerAs 语法一起使用的原因。

在下面的示例中，您可以看到我们通过在 $scope 上共享 myValue 属性以及 controllerAs 语法来实现相同的结果。

angular.module('app', [])

.controller('ParentController', ParentController)
  .controller('ChildController', ChildController);

ParentController.$inject = ['$scope'];

function ParentController($scope) {
  this.myValue = {};
  this.myValue.a = 1;

  $scope.myValue = this.myValue;
}

ChildController.$inject = ['$scope'];

function ChildController($scope) {
  this.myValue = $scope.myValue;

  this.myValue.a = 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="ParentController as parent">
    parent: {{parent.myValue.a}}
    <div ng-controller="ChildController as child">
      child: {{child.myValue.a}}
    </div>
  </div>
</div>

这可以在没有 $scope 的情况下使用服务来完成:

angular.module('app', [])

.controller('ParentController', ParentController)
  .controller('ChildController', ChildController)
  .service('valueService', ValueService);

ParentController.$inject = ['valueService'];

function ParentController(valueService) {
  this.myValue = {};
  this.myValue.a = 1;

  valueService.setValue(this.myValue);
}

ChildController.$inject = ['valueService'];

function ChildController(valueService) {
  this.myValue = valueService.getValue();

  this.myValue.a = 2;
}

function ValueService() {

  var storedValue;

  this.getValue = function() {
    return storedValue;
  }

  this.setValue = function(value) {
    storedValue = value;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="ParentController as parent">
    parent: {{parent.myValue.a}}
    <div ng-controller="ChildController as child">
      child: {{child.myValue.a}}
    </div>
  </div>
</div>