Wie in einer Richtlinie Link, um den übergeordneten Bereich für den Zugriff auf

Question

So auf der Winkel Dokumentations-Website können Sie festlegen, Tobias und Jeff

angular.module('docsTransclusionExample', []) 
.controller('Controller', ['$scope', function($scope) { 
    $scope.name = 'Tobias'; 
}]) 
.directive('myDialog', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    scope: {}, 
    templateUrl: 'my-dialog.html', 
    link: function (scope, element) { 
     scope.name = 'Jeff'; 
    } 
    }; 
}); 

Wenn Sie den Namen zu tun ist {{name}} es sagen wird

The name is Tobias 

Ich versuche, Tobias in der Link-Funktion zuzugreifen. Wie würde ich innerhalb der Link-Funktion den Wert von $ scope.name gleich Tobias erhalten?

scope.$parent.name = 'Jeff'; 

Answer 1

Sie $ parent Eigenschaft des Bereichs verwenden müssen. In diesem Fall besteht die einzige Möglichkeit zum direkten Zugriff auf die Eigenschaft des übergeordneten Bereichs darin, den Bereich $parent, Verweis auf das übergeordnete Bereichsobjekt, zu verwenden. Zum Beispiel:

link: function(scope, element) { 
    scope.name = 'Jeff'; 
    scope.parentName = scope.$parent.name; // Tobias 
} 

Dies ist jedoch nicht ideal. Aus diesem Grund ist man flexibler Ansatz betrachten möchten:

<my-dialog name="name"></my-dialog> 

und eine Scope-Konfiguration als definieren:

scope: { 
    parentName: '=name' 
} 

Answer 2

Da der Anwendungsbereich isoliert scope: {}, Richtlinie schafft ein neues Kind -umfang:

Answer 3

Ich frage mich nur, warum würden Sie so etwas wie dies wollen.

Auf diese Weise erstellen Sie eine Abhängigkeit zwischen dem Controller und der Richtlinie, die nicht existieren sollte.

Wenn Sie Eingabedaten für Ihre Anweisung benötigen, deklarieren Sie sie explizit.

Answer 4

Wie Sie transclude:true verwendet haben, können Sie scope:{} weglassen, wenn Sie keine lokalen Variablen haben. Putting scope:{} macht keinen Sinn.

so die Erklärung wie folgt

angular.module('docsTransclusionExample', []) 
.controller('Controller', ['$scope', function($scope) { 
    $scope.name = 'Tobias'; 
}]) 
.directive('myDialog', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    templateUrl: 'my-dialog.html', 
    link: function (scope, element) { 
     // scope.name = 'Jeff'; 
     // if name is in your parent scope, you should be able to get it here 
     console.log(scope.name); 
    } 
    }; 
}); 

bei der Vorlage Wenn Sie Sie ng-transclude Richtlinie verwendet wurde, sehen aussehen würde, bedeutet dies in Vorlage, wo der Wille des übergeordneten Bereich Variablen dort verwendet werden. Ich hoffe es macht Sinn.

Answer 5

Sie können es über $ parent wie diese:

link: function (scope, element) { 
    scope.name = 'Jeff'; 
    console.log(scope.name); 
    console.log(scope.$parent.name); 
}