2路數據綁定指令角度

Question

我混淆了角度的2路數據綁定。 看看代碼吧！ var bah可以訪問父對象$scope.something但是當我單擊按鈕時，控制器中的值更改為false但不是指令。 怎么了？ 那是一個bug嗎？

怎么解決這個？ 感謝幫助我，希望你能寫一個例子或參考鏈接

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

您可以直接訪問$scope.something在myDirective不使用$parent ，因為該指令已shared scope

並且對於你的問題，如果你試圖檢測指令內的something變化你不能只是放一個console.log($scope.something)並檢查因為它只執行了一次並且在點擊之后它不再打印了，那不是“T意味着something里面是改變不了的directive 。

並且你在ng-click犯了一個錯誤，比如ng-click="toggleSomething"它應該是ng-click="toggleSomething()"因為你調用的函數不僅僅是一個變量。

這是一個DEMO

我已將<h1> ... {{ something }}</h1>放在指令模板中，以顯示某些內容在指令中也按預期工作。

通過這個優秀的指令系列

Answer 2

我已經為你的代碼添加了一個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”將無效。

Answer 3

問題是你誤解了雙向數據綁定是什么，基本上任何與指令two way bound元素都可以由控制器或指令更新，而另一個元素會立即看到這個更改反映在其中。

當你使用$parent訪問它時，你強行讀取指令中的值，僅此而已，沒有人告訴指令重新評估var bah = scope.$parent.something因為scope.something的值已經更新了父級控制器。