Update the Parent Scope from Child Directive

Question

Just when I think I'm getting a grasp on AngularJS, it throws me overboard. I am trying to have a value in the parent scope be updated by passing it through to an isolated scope and then update it there.

I thought with two way data binding this would be as simple as the following:

In Parent Controller:

var self = this;
self.variable = 'Init';

In Element:

<div data-example-directive data-variable="ParentCtrl.variable"></div>

In the child Directive:

scope: {
    variable: '='
}
link: function(scope) {

    scope.updateVal = function(updatedVal) {
        scope.variable = updatedVal;
    }
}
template: '<button ng-click="updateVal('Updated Value')"></button>'

Now, if, inside that function, I call a console.log on the scope.variable it displays the correct value of updatedVal. However on the page itself, the parent hasn't been updated. Is there some sort of "refresh" I need to call?

I thought the point of AngularJS was that two-way data binding was baked in and I wouldn't have to ask it to update values based on later logic? A colleague has used a broadcast but is there not a more elegant sollution?

score 2 · Accepted Answer · edited May 23 '17 at 10:29

Your problem is simple :

When you read : In your scope you have not variable, so angular will try to look in the parent, etc... Until it found it.

When you write : It will set variable in your current scope. But your parent scope still has the old variable, you didn't updated it because variable was not directly in your current scope.

Take a look at : https://stackoverflow.com/a/16929117/3292234

You can resolve that by using the dot notation. Example with the controller as syntax :

<div ng-controller="controller1 as controller1">
    {{controller1.variable}}
    <div ng-controller="controller2 as controller2">
        <input ng-model="controller1.variable" type="text"/>
    </div>
</div>

Yeah I have had this working like your answer previously but I'm trying to not make references to controllers and the such directly. I understood that was the best practice of trying to keep things as modular as posisble. — Aleski, Jun 30 '15 at 09:12

score 0 · Answer 2 · answered Jun 30 '15 at 09:09

You are half way through in the controllerAs style and the $scope style, you need to pick one. Since the other answer shows the former, I will do the latter (I'm more familiar with this ;p)

angular.module('test', [])

.directive('exampleDirective', function() {
  return {
    scope: {
      variable: '='
    },
    link: function(scope) {
      scope.updateVal = function(updatedVal) {
        scope.variable = updatedVal;
      }
    },
    template: '<button ng-click="updateVal(\'Updated Value\')">Update</button>'
  }
})

.controller('Test', function($scope) {
  $scope.variable = "Init";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='test' ng-controller="Test">
  {{variable}}
  <div data-example-directive data-variable="variable"></div>
</body>

Apologies. I abstracted it from my current codebase and forgot to add that into it. Let me double check through my code and get back to you as your answer, I'm sure, is what I have at the moment essentially. — Aleski, Jun 30 '15 at 09:15

Update the Parent Scope from Child Directive

2 Answers2