Question

使用$scope控制器语法时，在父控制器的对象上设置值很简单。例如

<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 as语法实现相同的功能而不在子控制器中引用$scope？

Answer 1

您可以使用服务来完成，或者您可以参考范围。

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您不想使用$scope，可以将外部控制器传递到下游，请参阅directives communication

Answer 3

不，在ChildController内无法实现。

不要将ControllerAs视为$scope的新风格。每种都有不同的用途。

ControllerAs不会将值发布到作用域（实际上是通过别名，但不应假定别名为别名，因为别名是在视图中定义的）。

我在需要的地方使用两者，并使用以下约定：

app.controller("ParentCtrl", function($scope){
   // $scope-inherited view model
   var VM = $scope.VM = ($scope.VM || {});

   // controller-specific view model
   var vm = this;

   VM.valueVisibleToChildControllers = "foo";
   vm.valueVisibleOnlyToTheView = "bar";
});

使用＆＃39;控制器作为＆＃39;将对象值传递给父控制器的语法

3 个答案: