All geek questions in one place

How to get data from angular directive

Hope someone can help me with a small example, because angular drives me crazy :(

I am doing the first time Formular, which should follow this structure: Angular APP

mainController
----> smallController1
--------> other image elements ----> smallController2
--------> other elements of the image ----> Directive1 (example 1)
----> anotherSmallController
----> Directive 1 (example 2)

Directive1 receives many attributes, and each instance allows the selection of many parameters, and the result of user interaction should be stored in the object, and this object should be accessed from mainController for each instance separately.

Does anyone have an example that works like this?

Thanks in advance, John

+6
source share
3 answers

The best way to return data from a directive is to bind the model to its own scope.

var app = angular.module('app', []); app.controller('mainController', [ '$scope', function($scope){ $scope.myObj = "Initial Value"; } ]); app.directive('dirName', [ function(){ return { restrict : 'A', scope : { obj : "=ngModel" }, link : function(scope, element, attrs){ scope.obj = attrs.newValue; } }; } ]); 
 <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body ng-app="app" ng-controller="mainController"> <input dir-name ng-model="myObj" new-value="Final Value"> </body> </html>

You can also check this tray: http://jsbin.com/fuqujo/1/edit?html,js,output

+8
source

Use emit to send data to the parent controller. It can be a receiver because it is listening to an event. Read about the source and broadcast. In your child controller or directory use:

$ scope. $ emit ('myEvent', object);

This sends the object to all parent controllers. In the parent controller use:

$ scope. $ on ('myEvent', function (event, obj) {console.log (obj);});

Listen to the emitted object.

+1
source

Try this code, it can help you:

http://plnkr.co/edit/L1NwUnNePofyRAQ6GVIg?p=preview

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.masterData = [ { entry: 'dunno' }, { entry: 'stuff' } ] }) app.directive('vessel', function() { return { replace: true, scope: { data: '=', speciality: '@' }, link: function(scope) { scope.updateData = function() { scope.data.entry = scope.speciality; } }, template: '<div>{{data.entry}} <button ng-click="updateData()">update</button></div>' } });

And the template:

  <body ng-controller="MainCtrl"> <p>Master data {{masterData | json}}</p> <div vessel data="masterData[0]" speciality="eggs"></div> <div vessel data="masterData[1]" speciality="bacon"></div> </body>

So, we have separate data models for each directive, which are updated at the user input that meets your requirements. Right?

0
source

Source: https://habr.com/ru/post/981206/

More articles:


All Articles