angularjs - 子范围与隔离范围中的行为 bindToController

Question

我在玩bindToController指令的选项。我偶然发现了使用子作用域与隔离作用域的行为之间看似奇怪的区别。当我使用隔离作用域时，会为指令创建一个新作用域，但对绑定(bind) Controller 属性的更改会转发到父作用域。然而，当我改用子范围时，我的例子就中断了。 (根据 http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html#improvements-in-14 应该允许使用 bindToController 使用子作用域)

编码:

{
    restrict: 'E',
    scope: {},
    controller: 'FooDirCtrl',
    controllerAs: 'vm',
    bindToController: {
        name: '='
    },
    template: '<div><input ng-model="vm.name"></div>'
};

工作演示 https://jsfiddle.net/tthtznn2/

使用子范围的版本:

{
    restrict: 'E',
    scope: true,
    controller: 'FooDirCtrl',
    controllerAs: 'vm',
    bindToController: {
        name: '='
    },
    template: '<div><input ng-model="vm.name"></div>'
};

演示: http://jsfiddle.net/ydLd1e00/

对名称的更改将转发到子范围，但不会转发到父范围。这与绑定(bind)到隔离范围相反。为什么是这样？

Answer 1

这是因为您为两个 Controller 使用了相同的别名(并且与注释中提到的对象与字符串值无关)。

如您所知，controller as alias语法只是创建一个 alias范围上的属性并将其设置为 Controller 实例。由于您使用的是 vm作为两种情况下的别名( MainCtrl 和 FooDirCtrl )，您正在“隐藏” MainCtrl在正常子范围的情况下的别名。
(在这种情况下，“正常”意味着“原型(prototype)继承自父范围”。)
因此，当您尝试评估 vm.name ( vm for MainCtrl )在新范围上获取“父值”，它实际上是在评估 FooDirCtrl.name (这是未定义的)，当您尝试分配回父范围时也会发生同样的情况。

隔离范围版本不受影响，因为范围不是从其父范围继承的。

Updated fiddle

更新:
仔细查看源代码，这可能是一个错误(因为“追溯”添加了对非隔离作用域的 bindToController 的支持)。
由于原型(prototype)继承，我们似乎已经摆脱了这个错误，但是当名称发生冲突时，我们就不走运了。

我必须仔细看看它是否确实是一个错误以及它是否“可修复”，但现在你可以通过为你的 Controller 使用不同的别名来解决它(参见上面的 fiddle )。

这就是我不喜欢使用 vm 的(部分)原因。作为我的 Controller 别名(尽管流行的风格指南建议使用它):)

让我们在 angular.js#13021 中跟踪它.