AngularJS - Wprowadzono zmianę wartości poza dyrektywą w dyrektywie

Question

Jestem początkującym Angular i nie mogę wymyślić, jak pobrać dane spoza dyrektywy. Mam różne dane, które są aktualizowane i potrzebuję dyrektywy, by wziąć te dane i pracować z nimi. Na przykład w poniższym kodzie pierwsze pole wejściowe jest podłączone do dyrektywy i działa poprawnie, ale bez umieszczenia atrybutu dyrektywy na drugim polu wejściowym, w jaki sposób dane wpisane w tym polu mogą zostać zaktualizowane w dyrektywie?

HTML:

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

dyrektywa:

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

Ponieważ dyrektywa nie tworzy nowego zakresu, zmienna scope w metodzie łącza do dyrektywy wskazuje zewnętrzny zakres zawierający dwa wejścia. Tak więc można wymienić:

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

z

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

Upewnij się, aby wprowadzić pewne dane w drugim wejściem przy testowaniu lub będzie drukować undefined.

Here is a working fiddle

---

EDIT: Jeśli nie trzeba używać wyizolować zakres w dyrektywie, można wykonać następujące czynności w HTML:

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

Różnica tutaj jest teraz przechodząc w modelu test2 w dyrektywie i ustawianie powiązania z nią w dyrektywie przez dodanie właściwości 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` 
}, 

Umożliwia to dostęp do przekazanych wartości w dyrektywie. Można by wtedy zmienić $watch es następująco:

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

podaję to w moim skrzypce Jako inny przykład, test3 i test4.

Answer 2

mógłbym wytłumaczyć, że w tekście, ale myślę, że byłoby znacznie lepiej, gdyby można oglądać te 3 filmy wg john lindquist:

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

I summary.

Są naprawdę krótkie (~ 4min każdy), ale bardzo proste i użyteczne.

PS: przy okazji, polecam również do oglądania innych. Wszystkie są krótkie i precyzyjne, kochają je.

Answer 3

dyrektywa angularjs pozwala korzystać z zakresu sposobów i robić wiele fajnych rzeczy, które można używać need.You zakres jak nie dziedziczenia, dziedziczenia i odizolowanych .Jeśli używasz zakresu jako pojedyncze, można przekazać zmienne i wiązania to gdzie chcesz.

tutaj są 2 fajne teksty z przykładami, które można pomóc

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