2路數據綁定指令角度

Question

即時混淆約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; 
    } 
    }; 
}); 

UPDATE 真的給你所有。尤其是對你來說@immirza

即時對不起，我不能一一答覆你。 它只是添加$parent

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

Answer 1

我已經提出了一個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點擊= 「toggleSomething（）」。這是一個不傳遞函數的函數調用。 ng-click =「toggleSomething」不起作用。

Answer 2

的問題是，你是誤會雙向數據綁定是什麼，基本上是two way bound有指令可通過控制器或指令和其他更新的任何元素將立即看到這種變化反映在它。

當你訪問它使用$parent你強行讀取你的配置參數的值，僅此而已，沒有人告訴指令重新評估var bah = scope.$parent.something爲scope.something值已在父控制器被更新。

Answer 3

您可以直接訪問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