以角度方式与指令控制器进行两种数据绑定答案

【问题标题】：Two way databinding with a directive's controller in angular以角度方式与指令控制器进行两种数据绑定
【发布时间】：2014-09-23 23:40:37
【问题描述】：

Angular 允许您使用指令的范围设置双向数据绑定。有谁知道用指令的控制器设置双向数据绑定的简单方法。

例如：http://plnkr.co/edit/TIxXrvYpP0na4xEeYLgS?p=preview

HTML

<body ng-app="myApp" ng-controller="MyCtrl as ctrl">
  Controller Test: {{ctrl.test}}
  <div dir test="ctrl.test"></div>
</body>

var MyCtrl = function($timeout) {
  this.test = {msg: 'hello'};
  var _this = this;

  $timeout(function() {
    _this.test = {msg: 'good bye'};
  }, 1000);
}

angular.module('myApp', []).directive('dir', function() {
  return {
    scope: {
      test: '='
    },
    template: '\
      <div>Directive Scope Test: {{test}}</div>\
      <div>Directive Controller Test: {{dCtrl.test}}</div>',
    controller: function($scope) {
      this.test = $scope.test;
    },
    controllerAs: 'dCtrl'
  }
});

在上面的示例中，MyCtrl 的test 变量绑定到dir 指令的范围内。但是当变量被分配给指令的控制器 (this.test = $scope.test;) 时，双向绑定就被破坏了。

我将作用域变量分配给控制器只是因为我发现在使用“控制器作为”语法时在使用作用域变量和控制器变量之间来回切换有点尴尬。但是，我能想到的最佳解决方案是直接从$scope 访问变量。有没有人有更适合“控制器作为”样式控制器的解决方案。

【问题讨论】：

标签： javascript angularjs data-binding angularjs-directive

【解决方案1】：

在我看来，当您使用 Angular 1.2.* 时，这是唯一的方法，但在您的具体情况下，您实际上在指令控制器实例中持有一个旧引用（因为在您的控制器中，您正在覆盖由test 属性完全通过执行 _this.test = {msg: 'good bye'};)，而您的指令控制器实例持有旧的（因此不会反映更改）。

相反，如果您执行_this.test.msg = 'good bye';，您将看到反映的更改，因为在这种情况下您没有覆盖对象引用。 Plnkr

没有自动将 2 路绑定范围属性附加到控制器实例的方法，除非您通过手表处理它或使用一些可以帮助您执行此操作的语法糖。

如果您将其升级到 1.3 rc，您将拥有一个属性 bindToController:true，您可以对其进行设置，以便属性将自动附加到控制器实例而不是直接附加到作用域上。好吧，最终控制器别名被附加到范围内。

Plnkr

【讨论】：

正是我想要的。谢谢！这可能会影响天平，让我切换到 1.3。
@rob 不客气.. 还有很多很棒的功能让我在我的新项目中升级.. :)