it-swarm.com.de

Ist es möglich, den übergeordneten Bereich von der Angular Direktive mit dem Bereich: true zu aktualisieren?

Ich muss den Gültigkeitsbereich eines übergeordneten Controllers in einer Direktive erben. Ich möchte nicht unbedingt den Gültigkeitsbereich verlassen: false. Ich möchte auch nicht unbedingt einen isolierten Bereich verwenden, da viel Arbeit erforderlich ist, um die Werte, die mir wichtig sind, ordnungsgemäß zu verknüpfen (denken Sie an viele Werte in einem übergeordneten Controller).

Ist es sinnvoll, scope:true In meiner Direktive zu verwenden, wenn ich den übergeordneten Bereich aktualisieren möchte?

<div ng-controller="MyCtrl">
      Hello, {{name}}!
        <my-directive></my-directive>
</div>
var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Dave';
}


myApp.directive('myDirective', function() {
    return {
        scope: true,
        restrict: 'EA',
        link: function(scope, elem, attrs) {
            scope.updateName = function(newName) {
                console.log('newName is: ' + newName);
                scope.name = newName;
            }
        },
        template: '<input ng-model="updatedName" placeholder="new name value"> <button ng-click="updateName(updatedName)">Update</button>'
    }
})

Bitte überprüfen Sie die Geige

33
binarygiant

Obwohl @ user1737909 bereits auf die zu lesende Frage SO) verwiesen hat ( Was sind die Nuancen der prototypischen/prototypischen Vererbung in AngularJS? , die das Problem erklärt und verschiedene Wege empfiehlt Um das Problem zu beheben, versuchen wir normalerweise, die Antwort auf SO zu geben.

Der Grund, warum Ihre Geige nicht funktioniert, liegt darin, dass ein primitiver Typ (d. H. Ein String, eine Zahl oder ein Boolescher Typ) geschrieben wird - z. B. scope.name = newName - das "Schreiben" geht immer zum lokalen Gültigkeitsbereich/Objekt. Mit anderen Worten, der untergeordnete Bereich erhält seine eigene Eigenschaft name, die die gleichnamige übergeordnete Eigenschaft abdeckt. Der Fix besteht darin, ein Objekt anstelle eines primitiven Typs im übergeordneten Bereich zu verwenden. Der untergeordnete Bereich erhält dann einen Verweis auf dieses Objekt. Alle Schreibvorgänge in die Objekteigenschaften (vom übergeordneten oder untergeordneten Objekt) werden an dieses eine Objekt gesendet. (Der untergeordnete Bereich erhält kein eigenes Objekt.)

$scope.obj = {name: 'Dave'};

Dann in Ihrer Direktive:

scope.obj.name = newName;

und HTML:

Hello, {{obj.name}}!

fiddle

50
Mark Rajcok

Bereichsvererbung bedeutet nicht, dass der Wert eines untergeordneten Elements auf den Wert des übergeordneten Elements festgelegt wird.

Anstatt scope.name = newName Fügen Sie im untergeordneten Bereich eine Methode zum übergeordneten Bereich hinzu, die denselben Job ausführt, jedoch im übergeordneten Bereich, und rufen Sie sie vom untergeordneten Bereich aus auf, da das untergeordnete Element diese Methode übernimmt.

15
lib3d

Innerhalb Ihrer Link-Funktion schreiben Sie in den übergeordneten Bereich (den globalen Bereich "$ scope") wie folgt: scope. $ Parent.name = newName;

6