当使用 $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
语法实现相同的功能?
最佳答案
您可以使用服务来完成,也可以通过引用范围来完成。
您正在使用的行为,范围继承,通常被称为不需要的副作用。这就是隔离作用域与 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>
关于angularjs - 使用 'controller as' 语法将对象值传递给父 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27442857/