2015-01-19 12 views
6

Spero che qualcuno mi può aiutare con un piccolo esempio, perché angolare mi sta facendo impazzire :(come ottenere i dati di ritorno da direttiva angolare

sto facendo da prima volta un Formular che dovrebbe seguire questa struttura: APP angolare

MainController
----> smallController1
--------> otherElements
----> smallController2
--------> otherElements
- ->Diretto ive1 (esempio 1)
----> anotherSmallController
---->direttiva1 (esempio 2)

Il direttiva1 riceve molti attributi, e ogni istanza permetterà la selezione di molte opzioni, e il risultato dell'interazione dell'utente deve essere archiviato in un oggetto e l'oggetto deve essere accessibile da mainController separatamente per ciascuna istanza.

Qualcuno ha un esempio che funziona in questo modo?

Grazie in anticipo, John

+0

Questa è una domanda abbastanza vaga, si può essere più specifico? Vuoi accedere ai dati in Direttiva1 da mainController? Ci sono tanti modi in cui puoi farlo in diverse situazioni –

risposta

8

Il modo migliore per ottenere i dati dalla direttiva è associare un modello all'ambito di applicazione della direttiva.

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>

È possibile controllare questo bin così: http://jsbin.com/fuqujo/1/edit?html,js,output

1

Utilizzare emettono per inviare i dati al controllore genitore. Potrebbe essere ricevitore perché si sta ascoltando un evento. Read circa su emettere e trasmettere. Nel proprio controller figlio o direttiva utilizzare:

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

Invia oggetto a tutti i controller principali. Nel controller padre utilizzare:

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

Per ascoltare l'oggetto emesso.

0

Prova questo codice fuori, potrebbe aiutarti:

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>' 
    } 
}); 

E il modello:

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

Così, abbiamo modelli di dati separati per ogni direttiva che vengono aggiornati sull'input dell'utente, adattando le tue esigenze. Destra?

Problemi correlati