AngularJS directive in directive is not setting up scope value

Question

I have a controller, with $scope.colorHex value

For example I have the directive colorpickerTooltip and in the template I call another directive: <colorpicker ng-model="colorHex"></colorpicker>

then in the second directive (colorpicker) I set up controller's value:

scope.colorHex = '#cecece';

and then in the second directive I call method scope.doIt(), but something is going wrong:

my $scope value is not updated! But why, maybe because of my 2-level directive?

How to set up the controller variable value?

possible duplicate of [angularjs Access parent scope from child controller](http://stackoverflow.com/questions/21453697/angularjs-access-parent-scope-from-child-controller) — Shashank Agrawal, Sep 29 '15 at 12:41

Shashank Agrawal · Answer 1 · 2015-09-29T12:45:25.497

Yes this is the problem of two level directive scope. Please read https://github.com/angular/angular.js/wiki/Understanding-Scopes

Define the colorHex in your controller as an object like:

$scope.dataStore = {};
$scope.dataStore.colorHex = '#cecece';

Then modify at first directive as:

<colorpicker ng-model="dataStore.colorHex"></colorpicker>

And then later use it in your second directive to update in doIt method:

$scope.doIt = function() {
    $scope.dataStore.colorHex = '#fff';
}

score 0 · Answer 2 · answered Sep 29 '15 at 12:39

Second directive copies the value from the first one and creates a new object in the second scope. You can prevent it via using a objective structure such as

$scope.color= {hex=undefined};

and change it in the inside scope

$scopescope.color.hex = '#cecece';

it will prevent this stuation

AngularJS directive in directive is not setting up scope value

2 Answers2