AngularJS - Modifica dell'ingresso al di fuori del valore della direttiva passato alla direttiva

Question

Sono un principiante di Angular e non riesco a capire come recuperare i dati dall'esterno di una direttiva. Ho vari input in fase di aggiornamento e ho bisogno della direttiva per prendere questi dati e lavorare con esso. Ad esempio, nel seguente codice, il primo campo di input è collegato alla direttiva e funziona correttamente, ma senza inserire l'attributo direttiva nel secondo campo di input, come possono essere aggiornati i dati digitati in quel campo nella direttiva?

HTML:

<div ng-app="myDirective"> 
    <input type="text" ng-model="test1" my-directive> 
    <input type="text" ng-model="test2"> 
</div> 

direttiva:

angular.module('myDirective', []) 
    .directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.$watch(attrs.ngModel, function (v) { 
       console.log('New Value from field 1: ' + v); 
       //console.log('New Value from field 2: ' + ???); 
      }); 
     } 
    }; 
}); 

Answer 1

Poiché la direttiva non crea un nuovo ambito, la variabile scope all'interno del metodo di collegamento della direttiva punta all'ambito esterno contenente i due input. Così si può sostituire:

//console.log('New Value from field 2: ' + ???); 

con

console.log('New Value from field 2: ' + scope.test2); 

Assicurati di inserire alcuni dati nel secondo ingresso quando si prova o sarà stampare undefined.

Here is a working fiddle

---

EDIT: Se avete bisogno di usare isolare il campo di applicazione nella vostra direttiva, si potrebbe effettuare le seguenti operazioni nel codice HTML:

<input type="text" ng-model="test1" my-directive="test2"> 
<input type="text" ng-model="test2"> 

La differenza qui sta ora passando nel modello test2 nella direttiva e impostando un binding ad esso nella direttiva aggiungendo la proprietà scope:

scope: { 
    otherInput: '=myDirective' 
    // this tells the directive to bind the local variable `otherInput` 
    // to whatever the `my-directive` attribute value is. In this case, `test2` 
}, 

Ciò consente di accedere ai valori passati nella direttiva. Si potrebbe quindi cambiare le $watch es come segue:

scope.$watch(attrs.ngModel, function (v) { 
    console.log('New Value from field 1: ' + v); 
    console.log('New Value from field 2: ' + scope.otherInput); 
}); 

// notice the syntax for watching a scope variable 
scope.$watch('otherInput', function (v) { 
    console.log('New Value from field 1: ' + scope.test1); 
    console.log('New Value from field 2: ' + v); 
}); 

ho incluso nel mio violino come un altro esempio, test3 e test4.

Answer 2

avrei spiegato che nel testo, ma penso che sarebbe stato molto meglio se si guarda questi 3 video da john lindquist:

• Isolate Scope "@"
• Isolate Scope "="
• Isolate Scope "&"

E summary.

Sono veramente brevi (~ 4 minuti ciascuno) ma molto semplici e utili.

PS: a proposito, ti consiglio di guardare anche gli altri. Sono tutti brevi e precisi, li amavano.

Answer 3

direttiva AngularJs consente di utilizzare la portata con modi diversi e fare molte cose interessanti si need.You possibile utilizzare il campo di applicazione non ereditare, ereditare e isolato .Se si utilizza ambito come isolato, è possibile passare variabili e legano ovunque tu voglia.

qui ci sono 2 articoli freddi con esempi, che possono aiutare a

http://www.w3docs.com/snippets/angularjs/change-variable-from-outside-of-directive.html

http://www.w3docs.com/snippets/angularjs/bind-variable-inside-angularjs-directive-isolated-scope.html