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 eg 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 :)

Answer 1

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

1. 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.
2. 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:

1. formData which is an object and holds user inserted data.
2. 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...

Answer 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/