I'm attempting to set up an angular app with three directives - container, getter and setter. I've put it up at http://plnkr.co/edit/CoYLuVbiZTFWvNsN5r5L?p=preview
<container> <getter name="first"></getter> <getter name="second"></getter> <setter name="setter"></setter> </container> Container has a scope with the variable value which can be read by getter and setter. getter displays the value whilst setter both displays and changes the value.
angular.module("app").directive('container', function() { return { scope: {}, template: '<h1>Container <input ng-model="value"/></h1><div ng-transclude>SCOPED1</div>', transclude: true, controller: ["$scope", "$window", function($scope, $window){ $scope.value = "Hello" }] }; }); Both getter and setter have their own isolate scope but also have a two-way binding to the container scope to get and set value.
angular.module("app").directive('getter', function() { return { require: '^container', scope: { name: '@', value:'=' }, template: '<p>I am getter {{name}}, I got {{value}}</p>' }; }); At the moment, getter and setter can access the container scope using $scope.$parent.$parent.value but that seems way too clunky. I thought using scope:{value:'='} would set up two way bindings but apparently not.
What am I doing wrong?
