2 路数据绑定指令 angular

Question

我对 angular 中的 2 种数据绑定感到困惑。看代码！ var bah 可以访问父对象 $scope.something 但是当我单击按钮时，控制器中的值更改为 false 而不是指令中的值。怎么了？这是一个错误吗？

如何解决这个问题？感谢帮助我，希望你写一个例子或参考链接

HTML

<div ng-controller="myController">
  show me something {{ something }} <br>
  <button ng-click="toggleSomething"><button>

  <!-- this is a canvas -->
  <my-directive></my-directive>
</div>

JS

angular.module('fooBar',[]).controller('myController', ['$scope', function($scope) {
   // this is the something
   $scope.something = true;

   $scope.toggleSomething = function(){
     if($scope.something) { 
       $scope.something = false 
     } else { 
       $scope.something = true 
     }
   }

}]).directive('myDirective', function(){
  return {
    template: '<canvas width="500px" height="500px"></canvas>',
    link: function(scope, el, attr) {
      //how to access that 'something'
      var bah = scope.$parent.something;
    }
  };
});

更新真的很感谢大家。特别是对你@immirza

非常抱歉无法一一回复您。它只是添加 $parent

//how to access that 'something'
var bah = scope.$parent.something

Answer 1

问题是您误解了什么是双向数据绑定，基本上 two way bound 带有指令的任何元素都可以由控制器或指令更新，而另一个会立即看到此更改的反映在里面。

当您使用 $parent 访问它时，您正在强制读取指令中的值，仅此而已，没有人告诉指令将 var bah = scope.$parent.something 重新计算为 scope.something 的值已在父控制器中更新。

Answer 2

你可以直接访问myDirective中的$scope.something而不使用$parent因为指令有shared scope

对于你的问题，如果你试图检测指令中的 something 变化，你不能只放一个 console.log($scope.something) 并检查，因为它只执行一次，点击后它不会再次打印，这并不意味着 something 在 directive.

中没有变化

而且你在 ng-click 中犯了一个错误，比如 ng-click="toggleSomething" 它应该是 ng-click="toggleSomething()" 因为你调用的是一个函数而不仅仅是一个变量。

这是一个DEMO

我已将 <h1> ... {{ something }}</h1> 放入指令模板中，以表明指令中的某些内容也按预期工作。

去看看这个优秀的directive series

Answer 3

我已经用你的代码安装了一个 plunker，并向指令添加了双向绑定。你可以在 plnkr

看到它

angular.module('fooBar',[]).controller('myctr', ['$scope', function($scope) {
   // this is the something
   $scope.something = true;

   $scope.toggleSomething = function(){
     if($scope.something) { 
       $scope.something = false 
     } else { 
       $scope.something = true 
     }
   }

}]).directive('myDirective', function(){
  return {
    //changed canvas to span so for simplixity.
    template: '<span width="500px" height="500px">{{blah}} --- {{ dsomething }}</span>',
    scope: { dsomething: "=" },
    link: function(scope, el, attr) {

      //watching $parent.variable is not recommonded as it makes your
      //directive less reusable and forces who ever wants to use your
      //directive to create the variable.  dsomething will just update
      //nicely w/o any code in this link function. the code below is just to demonstrate
      //how to get it done by using $watch with $parent scope.

      //how to access that 'something'
      if(!scope.dsomething){
        scope.dsomething = "something";
      }

      //because blah is a local variable and not a two-way binding variable
      //we need to use $watch to update the value.
      //you can use "dsomething" instead of "$parent.something"
      //
      scope.$watch("$parent.something", function(newVal, oldVal){
         scope.blah = newVal;
      })
    }
  };
});

您可以将指令用作：

<div ng-controller="myctr">
  show me something {{ something }}             <br />
  <button ng-click="toggleSomething()">Update Something</button>
  <button>
    <!-- this is a canvas -->
    <my-directive dsomething="something"></my-directive>
  </button>
</div>

注意ng-click="toggleSomething()"。这是一个不传递函数的函数调用。 ng-click="toggleSomething" 不起作用。

2 路数据绑定指令 angular

2 way data binding directive angular

javascript

directive

2-way-object-databinding

angularjs

angularjs-directive