How To Get Data Back From Angular Directive


i hope somebody could help me with a small example, because angular is driving me crazy 🙁

I’m making by first time a Formular that should follow this structure:
Angular APP

—->Directive1 (instance 1)
—->Directive1 (instance 2)

The Directive1 receives many attributes, and each instance will allow the selection of many options, and the result of the user interaction should be stored in an object, and that object should be accessed from mainController for each instance separately.

Does anyone have an example that work like that?

Thanks in advance,


The best way to get data back from directive is to attach a model to directive’s self scope.

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

    $scope.myObj = "Initial Value";

app.directive('dirName', [
    return {
      restrict : 'A',
      scope : {
        obj : "=ngModel"
      link : function(scope, element, attrs){
        scope.obj = attrs.newValue;
<!DOCTYPE html>
<script src="//"></script>
<script src="//"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<body ng-app="app" ng-controller="mainController">
  <input dir-name ng-model="myObj" new-value="Final Value">

You can check this bin as well :,js,output

Answered By – Neeraj Verma

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published