Angular Directive updating Parent Controller Object

Question

I've been using Angular for a while but I'm a little lost when it comes to two-way data binding between a Controller (which is using the controller as syntax) and a directive which is inside the template for that controller.

The purpose of the directive is to essentially be an input field for a very specific set of data I need to collect (photograph, text and a few other things).

How it works.

My controller FormCtrl loads in some data from app cache. It then passes this data to an object called ctrl.form_fields.

I need my directive to be able to access ctrl.form_fields to display the data. Additionally, if any change to the data is made within the directive the FromCtrl ctrl.form_fields object is updated.

I've done some research and experimentation on two-way binding between a parent controller and child directive but I can't figure it out. If someone could post up a theoretical example I'd really appreciate it.

I don't want to use $scope.$parent etc... to accomplish this as it will get too messy and difficult to maintain. Plus I'm trying not the use $scope as much as possible.

Cheers, Dean

Kugie · Accepted Answer · 2016-11-15 13:22:33Z

1

Maybe I didn't understand your question correctly, but cant you pass the object/value to the directive through attributes, and use a two-way binding expression?

angular
  .module('app')
  .directive('myDirective', function() {
    return {
     restrict: 'E',
     templateUrl: 'myTemplate.html',
     scope: {
       obj: "=" // Two way decleration  
     },
      
     controller: function($scope) {
       console.log($scope.obj); 
     }
   }
  });

<my-directive obj="ctrl.object"></my-directive>

angular

answered Nov 15, 2016 at 13:22

Kugie

335 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dean Sherwin Over a year ago

Thank you. This worked. I just couldn't get my head around two way binding in this instance. I was missing the '=' declaration. :) One question though - in my directive, the Contollers variable is now available but only on $scope. Is there any way I can pass it in so I'm not using $scope.data ?

rrd · Accepted Answer · 2016-11-15 13:21:47Z

0

An example of the (part of the) directive:

controller: FooController, // import FooController as './foo.controller';
controllerAs: 'vm',
replace: true,
scope: {
  fields: '=formFields'
},
template: '<input type="text" ng-model="fields" />'

Then in your controller, you can use the reference 'vm.fields'. Your input field should be:

<input type="text" form-fields="fields" />

I haven't tested this though.

answered Nov 15, 2016 at 13:21

rrd

5,9873 gold badges32 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular Directive updating Parent Controller Object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related