Javascript 双向数据绑定指令

我对angular中的双向数据绑定感到困惑。看看代码！

var bah

可以访问父对象

$scope.something

，但当我单击按钮时，控制器中的值更改为

false

，但不在指令中。怎么了？那是虫子吗

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

HTML

---

问题在于，您误解了双向数据绑定是什么，基本上，任何带有指令的

双向绑定

元素都可以由控制器或指令进行更新，而另一个将立即看到该更改反映在其中

---

当您使用

$parent

访问它时，您正在强制读取指令中的值，仅此而已，没有人告诉指令重新评估

var bah=scope.$parent.something

作为

scope的值。父控制器中的某些内容已更新。
您可以直接访问
$scope.something
在
myDirective
中，而无需使用
$parent
，因为指令
共享范围

对于您的问题，如果您试图检测指令中的
某物
更改，您不能只放置
控制台.log（$scope.something）
并进行检查，因为它只执行了一次，单击后不会再打印，这并不意味着
指令
中没有更改
某些内容

您在
ng click
中也犯了一个错误，比如
ng click=“toggleSomething”
应该是
ng click=“toggleSomething（）”
，因为您调用的函数不仅仅是一个变量

这是一个

我已经把
。。。{{something}}
在指令模板中显示something也在指令中按预期工作

通过这个出色的
我为您的代码提供了一个plunker，并为指令添加了双向绑定。
你可以在

angular.module（'fooBar'，[]）.controller（'myctr'，['$scope'，function（$scope）{
//这是最重要的
$scope.something=true；
$scope.toggleSomething=function（）{
如果（$scope.something）{
$scope.something=false
}否则{
$scope.something=true
}
}
}]).directive（'myDirective'，function（）{
返回{
//为了简单起见，将画布更改为span so。
模板：{{blah}}--{{dsomething}}，
作用域：{dsomething:=“}，
链接：功能（范围、el、属性）{
//不建议观看$parent.variable，因为它会使您的
//指令的可重用性较差，并且强制那些想要使用您的
//指令创建变量。dsomething将仅更新
//在这个链接函数中没有任何代码。下面的代码只是为了演示
//如何使用$watch和$parent作用域来完成它。
//如何访问“某物”
如果（！scope.dsomething）{
scope.dsomething=“某物”；
}
//因为blah是一个局部变量，而不是一个双向绑定变量
//我们需要使用$watch来更新值。
//您可以使用“dsomething”而不是“$parent.something”
//
作用域.$watch（“$parent.something”），函数（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>


给我看些东西{{something}}

更新

注意ng click=“toggleSomething（）”按钮。这是一个函数调用，不传递函数。ng click=“toggleSomething”不起作用。
您如何知道
指令中的
某个东西没有改变？只需编写console.log（scope.$parent.something）。。哈哈，我在js和angular方面非常基础。XDumm-ok就是
console.log（scope.$parent.something）是打印一次（应该是真的），如果你把它放在指令链接函数中，不是吗？那么，如何在click-in指令之后检查值以确认值没有改变呢？我认为，以这种方式从父作用域访问变量是一种糟糕的设计。您应该将父属性作为双向绑定参数传递给指令。这样，您的指令就可以在其他地方重用；它的父作用域不需要像您的示例中那样命名属性。转到此plunker查看如何执行此操作的示例：@K.Toress yeah ur right它只打印一次，单击“{something}}”~NPToita oke后检查值我看到你的plunker..正在进行中：是的，我知道，我只是基本的双向数据绑定，在我看来，它真的很神奇。XD-Mmm。。你能写一个示例代码吗。提前谢谢。是的@K.Toress它为你工作，但不是我。我尝试使用“$watch”它工作得很好，但我想了解更多关于双向数据绑定的信息。供你参考。。我使用createJs在画布中而不是在“{{something}}”中创建物理碰撞应用程序。在你写作之前，我试过你的plunker方法，但它不起作用DIT在画布上工作得很好。有$watch和$parent。谢谢D
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;
    }
  };
});

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

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>