How can I bind deep child property of directive's scope? - angularjs

Question

My dear friends,
We can bind a scope property of a directive to the value of DOM attribute.
This works:
module.directive 'MyDirective', ->
scope:
directiveVar: '='
...
<div class='MyDirective' directive-var='parentVar'></div>
In example above we bind directive's directiveVar property to parentVar property of the parent scope.
This is a bi-directional binding, so if directiveVar is changed parentVar is automatically updated, and vice versa.
My question is:
Is there a way I can bind a deep child property of my directive's scope instead? Like scope.lv1.directiveVar or scope.lv1.lv2.lv3.directiveVar instead of scope.directiveVar?
Docs I read
What I want to achieve
I have an object in directive scope named lv1. I want to bind its property directiveVar to parent property.
This does not work:
scope:
lv1:
directiveVar: '='
And this does not work:
scope:
"lv1.directiveVar": '=myVar'
Demo
This is what works: http://plnkr.co/edit/OClnZ2Cl3BXr60PC2qVP?p=preview
This is what I want to achieve: http://plnkr.co/edit/tQEHeKOzGjGyplCwUtU2?p=preview

Answer 1

I hope this code will help. You can pass in an object and watch its properties or you can nest things in parent/child directives. Either way adding the "=" will enable two way binding on the entire object.
Controller:
$scope.directiveVar = {
level1: {
greeting: 'Hello'
}
};
$scope.otherVar = {
levelA: {
foo: 'bar'
}
};
Markup:
<div data-my-parent-directive data-other-var="otherVar">
<div data-my-directive data-directive-var="directiveVar"></div>
</div>
Directive:
angular.module('MyDirective', [])
.directive('myParentDirective', ['$window',
function ($window) {
return{
restrict: 'AE',
scope:{
otherVar: '='
},
controller: function($scope, $element) {
var othis = this;
this.element = $element;
this.otherVar = $scope.otherVar;
}
};
}
])
.directive('myDirective', ['$window',
function ($window) {
return {
restrict: 'AE',
require: '?myParentDirective',
scope: {
directiveVar: '='
},
link: function(scope, elm, attr, myParentDirectiveCtrl) {
console.log(myParentDirectiveCtrl.otherVar);
console.log(myDirectiveParentCtrl.otherVar.levelA);
scope.$watch('directiveVar.level1', function (newValue, oldValue){
console.log(newValue, oldValue);
});
}
};
}
])
Edit:
You could simply do this:
<div data-my-parent-directive data-other-var="otherVar">
<div data-my-directive data-directive-var="directiveVar.level1"></div>
</div>
Which is useful when modeling data. For example:
var items = apiService.getItems();
var layers = [...],
$scope.map = {
points: items,
layers: layers,
highAltMap: 'Streets',
lowAltMap: 'Satellite'
};
That said if you are modelling data see this ng-conf video which I believe the speaker touched on some OO patterns.
Edit 2:
You could use a service like this plunker

Answer 2

I know date of the question, but...
Create json object in attribute
return {
scope: {
date: "=",
formChange: "=?",
ngDisabled: "=?",
deepInclude: "=?"
},
...
<user-date-without-current-date date="cv.dateBirthday" deep-include="{cnt:cv.dateBirthday}" form-change="$parent.form_change"></user-date-without-current-date>
Is it usefull?