Geek asks and answers

How can I bind a deep child property of a directive scope?

My dear friends,

We can associate the scope property of the directive with the DOM attribute.

It works:

module.directive 'MyDirective', ->
  scope:
    directiveVar: '='

...

<div class='MyDirective' directive-var='parentVar'></div>

In the above example, we bind the directive directiveVarproperty to the parentVarparent scope property .

This is bidirectional binding, so if directiveVarchanged, it is parentVarautomatically updated and vice versa.

My question is:

Is there a way to relate the deep child property of my scope? How scope.lv1.directiveVaror scope.lv1.lv2.lv3.directiveVarinstead scope.directiveVar?

Docs i read

What i want to achieve

I have an object in scope with a name lv1. I want to associate its property directiveVarwith the parent property.

This does not work:

scope:
    lv1:
        directiveVar: '='

And this does not work:

scope:
    "lv1.directiveVar": '=myVar'

Demo

, : http://plnkr.co/edit/OClnZ2Cl3BXr60PC2qVP?p=preview

: http://plnkr.co/edit/tQEHeKOzGjGyplCwUtU2?p=preview

+3
2

, . , parent/child. "=" .

:

$scope.directiveVar = {
   level1: {
       greeting: 'Hello'
   }
};
$scope.otherVar = {
    levelA: {
        foo: 'bar'
    }
};


:

<div data-my-parent-directive data-other-var="otherVar">
    <div data-my-directive data-directive-var="directiveVar"></div>
</div>



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:

:

<div data-my-parent-directive data-other-var="otherVar">
    <div data-my-directive data-directive-var="directiveVar.level1"></div>
</div>

. :

var items = apiService.getItems();
var layers = [...],
$scope.map = {
    points: items,
    layers: layers,
    highAltMap: 'Streets',
    lowAltMap: 'Satellite'
};

, , . ng-conf , , , OO.

2:

+2

, ...

json

return {
  scope: {
    date: "=",
    formChange: "=?",
    ngDisabled: "=?",
    deepInclude: "=?"
  },
  ...
Hide result

<user-date-without-current-date date="cv.dateBirthday" deep-include="{cnt:cv.dateBirthday}" form-change="$parent.form_change"></user-date-without-current-date>
Hide result

?

0

More articles:


All Articles