所以,我可以从子控制器更改模型值,但是当子控制器在时,ng-switch
它就不起作用,为什么?我创建了一个示例来演示它。
避免这种情况的一种方法是.
在模型名称中使用 ,例如bunnies.kills
. 这是一个错误还是一个功能?
使用 Angular 1.0.6
所以,我可以从子控制器更改模型值,但是当子控制器在时,ng-switch
它就不起作用,为什么?我创建了一个示例来演示它。
避免这种情况的一种方法是.
在模型名称中使用 ,例如bunnies.kills
. 这是一个错误还是一个功能?
使用 Angular 1.0.6
使用您的代码结构,在您的子控制器中,您需要更改:
$scope.$parent.kills++;
至
$scope.$parent.$parent.kills++;
解释:MainCtrl
的作用域是 的父作用域,但是andSimpleParentCtrl
的祖父母。正如其他一些人指出的那样,创建自己的范围,然后您和每个人都创建了.Step1Ctrl
Step2Ctrl
ng-switch
Step1Ctrl
Step2Ctrl
ng-switch
注意:每次单击 1 或 2 按钮时,ng-switch
当前匹配的子控制器都将获得一个新范围。
另外:如果您碰巧正在查看 Angular 源代码并想知道ng-switch
指令如何在没有属性的情况下创建自己的范围scope
,答案是它在其链接方法中手动执行此操作 via scope.$new()
。指令ng-include
、ng-switch
、ng-repeat
和ng-view
都以这种方式创建新范围,无论是在链接方法中还是在编译方法返回的链接函数中。
资源:
https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m
ng-switch 创建自己的子范围,这就是为什么@sh0ber 的答案是让它工作的一种方法。一般来说,模型应该在控制器范围(因此是引用对象)中引用,而不是不是原语。所以使用 a.
是一种“最佳实践”。
这不是错误,但也不是功能。这是JavaScript 原型继承与原语一起工作的方式。
我会对这个问题采取稍微不同的方法。
$scope.$parent
我建议您将所有的兔子杀戮逻辑移到共享服务/模型中,而不是使用。
另外,我会尽量避免引用父视图/控制器。引用父级可能会使重用代码变得困难,并且随着项目的增长,调试起来会很痛苦。父母可以知道自己的孩子,但孩子应该对自己的父母知之甚少。
这是更新的 Plunk:http ://plnkr.co/edit/PLDbfU8Fu7m59A42qdR6?p=preview
HTML
<body ng-controller="MainCtrl">
<p>
Dead bunnies: <strong>{{Elmer.deadWabbits}}</strong>
</p>
<div ng-controller="SimpleParentCtrl">
<button ng-click="Elmer.killTheWabbit()">Kill from simple parent gun</button>
</div>
<hr>
<div ng-switch="" on="step">
<div ng-switch-when="first" ng-controller="Step1Ctrl">
<button ng-click="Elmer.killTheWabbit()">Kill from 1 tab gun</button>
</div>
<div ng-switch-when="second">
<div ng-controller="Step2Ctrl">
<button ng-click="Elmer.killTheWabbit()">Kill from 2 tab gun</button>
</div>
</div>
</div>
<hr>
<p>
<button ng-click="changeStep('first')">1</button> <button ng-click="changeStep('second')">2</button>
</p>
</body>
JS
angular.module('plunker', []).
service("Elmer", [function() {
this.deadWabbits = 0;
this.killTheWabbit = function() {
this.deadWabbits++;
};
}]).
controller('MainCtrl', function($scope, Elmer) {
$scope.Elmer = Elmer;
$scope.step = 'first';
$scope.changeStep = function(name){
$scope.step = name;
};
}).
controller('SimpleParentCtrl', function() {}).
controller('Step1Ctrl', function() {}).
controller('Step2Ctrl', function() {});
避免这种情况的一种方法是使用 . 在模型名称中,例如 bunnies.kills。这是一个错误还是一个功能?
这已经解释了很多次:https ://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance 和 mhevery 的视频