JS - AngularJS - Get data of an directive from a controller

Question

I´ll give my best to make my problem understandable:

I have a directive. This directive handles/alters also some data it displays. Now I was wondering how I can access these data from a parent scope e.g. the controller. I am currently getting access to the scope by selecting the element and ask for the corresponding scope:

element.scope()

It works fine but it occurs to me that this is kind of a - lets say - unconventional or odd way to get the scope of an directive.

I apologize for my english (I still practicing) and hope you guys can help me. Thank you in advance :)

could you please tell me more about your directive?Is it an element?How do you initialize it with the data should be displayed? — soroush gholamzadeh
– soroush gholamzadeh, Commented Aug 16, 2015 at 12:44
The directive is an element. It displays some inputfields the user can use to enter data. When the user has entered all the data I would like to gain access to these data. — lilly
– lilly, Commented Aug 16, 2015 at 12:50
OK,So it's some kind of a form, you can use controller in your return object in the directive and then, You can directly control all of your models. should I show you an example? — soroush gholamzadeh
– soroush gholamzadeh, Commented Aug 16, 2015 at 12:53

soroush gholamzadeh · Accepted Answer · 2015-08-16 13:37:51Z

OK, Based on the comments your directive is some kind of a form. There are two approaches for controlling the data inside a directive:

Parent controller of a directive should control the data. In that case, Data of each directive is unique and does not share between all directives.
The directive itself should control the data. Which it means the data will be shared in all directives, and if You change one, another will be changed too.

I go with the solution number 1 which is more preferable in my guess. Let's say your template of directive is something like this,We call it template.html:

<form name="directive_from" ng-submit="submit_form()">
    <input type="text" ng-model="form.name" name="username" placeholder="username"><br>
    <button type="submit">Submit</button>
</form>

Because of the time,I skipped validation but you can do that easily :)

And the directive:

angular.module('app')
    .directive('formDirective',function(){
        return {
            restrict: 'E',
            templateUrl: 'template.html',
            scope: {
                form: '=formData',
                submit_form: '@formFunc'
            },
            controller: ['$scope', function($scope) {
                //some extra logic or binding if you need
            }
        }
})

OK,Now our directive which we call it formDirective accepts two parameters:

formData which is an object and holds user inserted data.
formFunc which is a function for submitting the form.

Now parent controller:

angular.module('app')
    .controller('MainCtrl', ['$scope', function($scope) {
        $scope.form_object = {};
        $scope.submit_it = function() {
            //Do whatever you like with the $scope.form_object
        }
    }

And let's see the view:

<div ng-controller="MainCtrl">
   <form-directive form="form_object" form-func="submit_it()"></form-directive>
</div>

That's it! It's so simple example that I believe you can customize it by your needs,But the main logic for controlling the data is something like that. for example you can pass a function for ng-change on the input field or add more input fields or...

user1686644 · Accepted Answer · 2015-08-16 14:30:24Z

2

@lilly: I think you you are looking for data exchange between the parent scope and isolated scope which is possible via '='

Here is the working fiddle

    angular.module('App', [])
.controller('Main', ['$scope', function ($scope) {
  $scope.exchange = {};
  $scope.exchange.value = "initialized by controller";
}])


.directive('inputValue', function($timeout) {
  return {
    restrict: 'A',
    scope: {exchangeValue: '='},
    link: function(scope, element, attrs) {
        $timeout(function(){
                 scope.exchangeValue="changed by directive";
        },2000);  
    }
  };
});

http://jsfiddle.net/tiru/dJty6/43/

answered Aug 16, 2015 at 14:30

user1686644

212 bronze badges

1 Comment

lilly Over a year ago

thats also very interesting =) thanks for your effort!

Collectives™ on Stack Overflow

JS - AngularJS - Get data of an directive from a controller

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related