使用ui-router和ControllerAs语法的AngularJS数据绑定,不带$ scope

时间:2015-02-26 09:32:20

标签: angularjs angularjs-scope angular-ui-router

我遵循John Papa制定的惯例,但遗憾的是我并没有真正弄清楚如何使用ui-router,ControllerAs和vm变量而不是$来绑定从子控制器到父控制器的值范围。

我做了两个例子,第一个例子说明了工作环境,所以没有ControllerAs和普通的$ scope变量,这是有效的,但当我将$ scope更改为

var vm = this; 

它不会处理对子控制器对父级所做的任何更改。我真的想在没有使用某种PUBSUB模式的情况下使其工作,因为这是使用双向数据绑定的最重要的功能之一,但我不知道在这种情况下这是否可行?

我已经创建了两个Plunker示例来说明问题:

Plunker示例1:

Plunker示例2:

第一个示例有效,当更改模板中的某些输入字段' register-identification.html'时,这将直接从父控制器(RegisterBaseController)更改{{formData}}。

第二个示例不会处理任何更改。

我希望我的解释有意义吗?希望有人可以帮助我!

非常感谢提前!

1 个答案:

答案 0 :(得分:2)

此方案的行为符合预期,但不是您想要的。

$ scope继承 - 按引用传递模型

原因是,任何子状态都会提供{strong> $scopeprototypically inherited版本:

$childScope = $scope.$new();

这意味着,在父级上创建的任何引用都可以在子级

上使用
$scope.Reference = {};
$scope.Reference.A = 1;

$childScope = $scope.$new();
// here both contain 1 as Reference.A

$childScope.Reference.A = 2;

// both contain 2
$childScope.Reference.A === $childScope.Reference.A

隐藏与另一个

的引用

但是你做的(控制器做了什么)是:

$scope.vm = controllerParent;

$childScope = $scope.$new();

$childScope.vm = controllerChild;

vm 本身的引用已更改。

带点的解决方案 - 模型{}

所以,可能有效的是组合:

$scope.Model = {}
$scope.Model.vm = controllerParent;

$childScope = $scope.$new();

$childScope.Model.childVm = controllerChild;
$childScope.Model.vm ... // this is parent controller 

检查文档:

What Do Child States Inherit From Parent States?

主要是:

Scope Inheritance by View Hierarchy Only

  

请记住,只有嵌套状态的视图时,范围属性才会继承状态链。范围属性的继承与状态的嵌套无关,也与视图嵌套(模板)无关。

     

完全有可能您有嵌套状态,其模板在您网站中的各种非嵌套位置填充ui-views。在这种情况下,您不能期望在子状态视图中访问父状态视图的范围变量。

检查模型中的