Javascript 使用指令的双向数据绑定'；角速度控制器_Javascript_Angularjs_Data Binding_Angularjs Directive

Javascript 使用指令的双向数据绑定'；角速度控制器

javascript angularjs data-binding

Javascript 使用指令的双向数据绑定'；角速度控制器,javascript,angularjs,data-binding,angularjs-directive,Javascript,Angularjs,Data Binding,Angularjs Directive,Angular允许您使用指令的作用域设置双向数据绑定。有没有人知道一种简单的方法可以使用指令的控制器设置双向数据绑定例如： HTML 控制器测试：{ctrl.Test} JS var MyCtrl=function（$timeout）{ this.test={msg:'hello'}； var_this=这个； $timeout（函数（）{ _this.test={msg:'再见'}； }, 1000); } angular.module（'myApp'，[]）指令（'dir'，函数（）{

Angular允许您使用指令的作用域设置双向数据绑定。有没有人知道一种简单的方法可以使用指令的控制器设置双向数据绑定

例如：

HTML


控制器测试：{ctrl.Test}

var MyCtrl=function（$timeout）{
this.test={msg:'hello'}；
var_this=这个；
$timeout（函数（）{
_this.test={msg:'再见'}；
}, 1000);
}
angular.module（'myApp'，[]）指令（'dir'，函数（）{
返回{
范围：{
测试：'='
},
模板：'\
指令作用域测试：{Test}\
指令控制器测试：{{dCtrl.Test}}'，
控制器：功能（$scope）{
this.test=$scope.test；
},
控制器：“dCtrl”
}
});

在上面的示例中，

MyCtrl

的

test

变量绑定到

dir

指令的范围。但是当变量被分配给指令的控制器（

this.test=$scope.test；

）时，双向绑定被破坏

我将范围变量分配给控制器只是因为我发现在使用“controller as”语法时在使用范围变量和控制器变量之间来回切换有点尴尬。然而，我能想到的最佳解决方案是直接从

$scope

访问变量。是否有人有更适合“控制器为”样式控制器的解决方案。

在我看来，当您使用angular 1.2.*时，这是唯一的方法，但在您的特定情况下，您实际上在directive controller实例中保留了一个旧引用（因为在控制器中，通过执行

\u this.test={msg:'good bye'}；

，您完全覆盖了

test

属性所持有的引用），而指令控制器实例持有旧的引用（因此不会反映更改）

相反，如果您执行

\u this.test.msg='再见'；

您将看到反映的更改，因为在这种情况下您没有覆盖对象引用。

没有自动将双向绑定的作用域属性附加到控制器实例的方法，除非您通过手表或使用一些语法糖来处理它，这将有助于您完成此操作

如果您将其升级到1.3 rc，您可以设置一个属性，以便属性将自动附加到控制器实例，而不是直接附加到作用域。不过，控制器别名最终会附加到作用域

在我看来，这是使用angular 1.2.*的唯一方法，但在您的特定情况下，您实际上在directive controller实例中保留了一个旧引用（因为在控制器中，您通过执行

\u this.test={msg:'good bye'}；

），而您的指令控制器实例保留旧实例（因此不会反映更改）

相反，如果您执行

\u this.test.msg='再见'；

您将看到反映的更改，因为在这种情况下您没有覆盖对象引用。

没有自动将双向绑定的作用域属性附加到控制器实例的方法，除非您通过手表或使用一些语法糖来处理它，这将有助于您完成此操作

如果您将其升级到1.3 rc，您可以设置一个属性，以便属性将自动附加到控制器实例，而不是直接附加到作用域。不过，控制器别名最终会附加到作用域

正是我想要的。谢谢！这可能会使天平倾斜，使我切换到1.3。@rob不客气。还有许多很棒的功能使我在新项目中升级了。）这正是我想要的。谢谢！这可能会使天平倾斜，并使我切换到1.3。@欢迎rob。还有许多很棒的功能使我在新项目中升级了。：）

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