Update parent controller value from child angular function

Question

I'm trying to change a scope value in a parent controller from a child directive.

I've added = for two-way binding such that when I click on a the directive's <tr>, it will fire openDetail, which will update scope.page, which has been two-way bound.

Yet it's not updating the controller's page value.

Controller HTML:

TEST : {{page}} //Not changed

<questions-list></questions-list>

Controller:

$scope.page = 'Not changed';

Directive HTML:

<tr ng-repeat="q in questions" ng-click="openDetail( q.id )">

"Questions List" Directive:

scope: {
    page : '='
},
...

scope.openDetail = function (id) {
    scope.page = 'question_detail';
};

In other examples, the ng-click handlers are always bound on the Controller. In my case, I need to fire an event from the directive, change directive value, and have it update the controller.

at child controller add `scope: true;` – Azad Jun 09 '16 at 05:48 — Azad, Jun 09 '16 at 05:48

Alexander Kravets · Accepted Answer · 2016-06-09T06:28:51.510

3

You should pass the parent scope's property to bind to via directive's element attribute:

<questions-list page="page"></questions-list>

Here the demo.

edited Jun 09 '16 at 06:28

answered Jun 09 '16 at 06:24

Alexander Kravets

4,245
1
16
15

Wait why do u need to call the attribute AND the value both page? – user3871 Jun 09 '16 at 06:26
attribute is the name of scope property defined in directive. value is the scope property defined in controller that you need to pass to directive for two way binding. – Hitesh Gaur Jun 09 '16 at 06:30
The attribute name is the property name of the directive's scope, the value is the property of the parent scope to bind to. – Alexander Kravets Jun 09 '16 at 06:30
@Growler, as to "why" - as a directive's user you choose which properties of your parent scope to pass to it. It's not up to directive to choose. Kind of "modular" approach. – Alexander Kravets Jun 09 '16 at 06:36

score 0 · Answer 2 · answered Jun 09 '16 at 06:07

I see a mistacke on your html :

<tr ng-repeat="q in questions ng-click="openDetail( q.id )">

must be replace by

<tr ng-repeat="q in questions" ng-click="openDetail( q.id )">

It missing a quote.

And for the problem, you use a primitive type to bind on directve. Try to encapsulate the value into an object on your parent scope :

$scope.page = { value: 'Not changed' };
<questions page="page.value">...</questions>

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

I can give you some different methods doing this .

Once consider your must pass values from controller to directive

like

scope: {
    page : '='
},

then

You can't access parent scope so need to transclude your child scope hence but it seems deprecated in some versions.

hence best practice is to share page variable with $rootScope.page first inject $rootScope in both controller and directive Injections and use

{{$root.page}}  // in controller

//and in directive function make this change

scope.openDetail = function (id) {
    $rootScope.page = 'question_detail';
};

Also if you need other ways like #BROADCAST or #EMIT ( really great thing in angularjs)

/// in directive

 $rootScope.$emit("emitName", {page:"page value" });

// in controller

 $rootScope.$on("emitName",function(event,data){
       $scope.page = data.page; // this comes from directive and assign to current scope's page variable 
   });

Please let me know if anyone works for you otherwise we can research more.

khajaamin

score -1 · Answer 4 · answered Jun 09 '16 at 06:05

I created a sample App for you

var app = angular.module('test', []);

app.controller('testCon', function($scope) {

  $scope.page = "Parent controll";

});

app.directive('questions', function() {

  return {
    scope: true,
    controller: ['$scope',
      function($scope) {

      }
    ]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCon">
  {{page}}

  <questions>{{page}}</questions>

</div>

Update parent controller value from child angular function

4 Answers4

khajaamin