用角度的指令控制器进行双向数据绑定

Question

Angular lets you setup two-way databinding with a directive's scope. Angular允许您使用指令的作用域设置双向数据绑定。 Does anyone know of an easy way to setup two-way databinding with a directive's controller. 有谁知道使用指令控制器设置双向数据绑定的简便方法。

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

HTML HTML

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

JS JS

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'
  }
});

In the example above MyCtrl 's test variable is bound to the scope of the dir directive. 在上面的示例中， MyCtrl的test变量绑定到dir指令的范围。 But when the variable is assigned to the directive's controller ( this.test = $scope.test; ) the two-way binding is broken. 但是，当将变量分配给指令的控制器时（ this.test = $scope.test; ），双向绑定将中断。

I'm assigning the scope variable to the controller just because I find it a bit awkward to go back and forth between using scope variables and controller variables when using the "controller as" syntax. 我将范围变量分配给控制器只是因为我发现使用“ controller as”语法时，在使用范围变量和控制器变量之间来回切换有点尴尬。 However the best solution I can think of is to just access the variable directly off of $scope . 但是，我能想到的最好的解决方案是直接从$scope访问变量。 Does anyone have a solution that fits better with "controller as" style controllers. 有没有人有一个更适合“控制器作为”样式控制器的解决方案。

Answer 1

That is the only way in my opinion when you are working with angular 1.2.*, But in your specific case you are actually holding an old reference in the directive controller instance (since in your controller you are overwriting the reference held by test property completely by doing _this.test = {msg: 'good bye'}; ),while your directive controller instance is holding the old one (so changes are not reflected). 在我看来，这是使用angular 1.2。*的唯一方法。但是，在您的特定情况下，您实际上是在指令控制器实例中保存了一个旧引用（因为在您的控制器中，您将完全覆盖test属性保存的引用）通过执行_this.test = {msg: 'good bye'}; ），则您的指令控制器实例将保留旧实例（因此更改不会反映出来）。

Instead if you do _this.test.msg = 'good bye'; 相反，如果您这样做_this.test.msg = 'good bye'; you will see the change reflected since you are not overwriting the object reference in that case. 您会看到反映出的更改，因为在这种情况下您不会覆盖对象引用。 Plnkr Plnkr

There is no automatic way of attaching 2-way bound scope properties to the controller instance, unless you handle it via watches or using some syntactic sugar which will help you do it. 除非您通过手表或使用一些语法糖来处理它，否则没有自动方法将2向绑定范围属性附加到控制器实例。

If you upgrade it to 1.3 rc you have a property bindToController:true which you can set so that properties will be automatically attached to the controller instance and not directly on the scope. 如果将其升级到1.3 rc，则可以设置属性bindToController:true ，以便属性将自动附加到控制器实例，而不是直接附加在作用域上。 Well ultimately the controller alias is attached to the scope though. 好吧，尽管如此，控制器别名最终还是附加到了作用域上。

Plnkr Plnkr

用角度的指令控制器进行双向数据绑定

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-09-23 23:50:57

用角度的指令控制器进行双向数据绑定

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-09-23 23:50:57

解决方案1
4 已采纳 2014-09-23 23:50:57