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