2-сторонняя директива по привязке данных угловая

Question

im confused около 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 Действительно спасибо вам всем. особенно для u @immirza

им так жаль, что я не могу ответить u один за другим. это просто добавить $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> 

Обратите внимание на нг-клик = "toggleSomething()".это вызов функции, не передающий функцию. ng-click = "toggleSomething" не будет работать.

Answer 2

Проблема заключается в том, что вы недоразумение, что связывание два способ передачи данных, в основном любой элемент, который two way bound с директивой может быть обновлен с помощью контроллера или директив, а другие сразу увидеть это изменение отразилось в нем.

Когда вы к нему доступ с помощью $parent вы принудительно читает значение в вашей директиве, и больше ничего, никто не говорит директиву переоценивать var bah = scope.$parent.something как значение scope.something было обновлено в родительском контроллере.

Answer 3

Вы можете получить прямой доступ к $scope.something в myDirective без использования $parent, потому что директива shared scope

и ваш вопрос, если вы пытаетесь обнаружить something изменения внутри директивы вы не можете просто поставить console.log($scope.something) и проверить, потому что его выполнение выполняется только один раз, и после щелчка его не будет печатать снова, это не значит, что something не изменяется внутри directive.

, а также вы сделали ошибку в ng-click, как ng-click="toggleSomething", это должно быть ng-click="toggleSomething()", так как вы вызываете функцию не только переменной.

вот DEMO

я поставил <h1> ... {{ something }}</h1> внутри шаблона директивы, чтобы показать, что что-то работает, как ожидалось в директиве также.

пойти, хотя эту прекрасную directive series