AngularJs: Warum hat scope in meinem Richtlinie nicht aktualisiert, wenn async-Daten ankommen?
Ich habe eine Richtlinie mit isolieren, der Umfang nimmt eine scope-variable per Referenz
angular.module('myApp')
.directive('myDirective', function() {
return {
scope: {
items: '='
},
templateUrl: 'template.html',
replace: true,
controller: 'myDirectiveCtrl',
controllerAs: 'ctrl'
};
})
.controller('myDirectiveCtrl', function($scope) {
this.items = $scope.items;
});
Diese übergeben wird, in etwa so:
<div my-directive items='items'></div>
In der externen controller-Daten werden asynchron geladen, und der Umfang Elemente bestanden in der Richtlinie aktualisiert:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.setItems = function() {
$scope.items = [
'Here',
'There',
'Everywhere'
];
};
});
Wenn die Daten geladen wurden, wird der Bereich außerhalb meines Richtlinie aktualisiert, aber innen ist es nicht
Mein html:
<div my-directive items='items'></div> <!-- this doesn't update -->
Outside directive
<ul ng-repeat='i in items'> <!-- this does update -->
<li>{{i}}</lu>
</ul>
<button ng-click="setItems()">Set items</button>
Wie bekomme ich den Bereich in meinem Richtlinie zu aktualisieren? Ich
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Winkel verläuft zunächst Ihre Richtlinie controller-Funktion, Ihre
$scope.items === undefined
, also, wenn Siethis.items = $scope.items
Ihrethis.items === undefined
zu.Das ist es. Nach, dass es nichts gibt, dass änderungen
this.items
.Dies ist im Gegensatz zu
$scope.items
.$scope.items
ist die zwei-Wege gebunden, um den äußeren Umfang, so dass, wenn Winkel erkennt eine Veränderung nach außen, setzt es den isolierten scope-variable.Am einfachsten (und am besten geeignet, meiner Meinung nach) ist die Verwendung der
$scope
- Eigenschaft direkt in der Richtlinie:Wenn Sie verwenden möchten Ihre controller als ViewModel statt Umfang (ich weiß nicht, warum Sie würde), könnten Sie das tun:
EDIT:
In Eckigen 1.3 Sie können auch
bindToController: true
in der Richtlinie zur definition, so dass der controller die Eigenschaft "items
" bekommen, der zwei-Wege-Bindung, die$scope.items
bekommt. Dann brauchen Sie nicht einmal zu tunthis.items = $scope.items;
:Ihre Gabel-plunker zu illustrieren.
bindToController
zu machen, Ihrem Beispiel zu arbeitenbindToController
- das ist genial - danke!Wenn es ist isoliert Bereich, den Sie nicht ändern können, was im inneren der Richtlinie nach dem erstellen einer separaten variable innerhalb der Richtlinie controller.
Hier ist die aktualisierte plunker, die entfernt den controller für die Richtlinie.
Versuchen Sie Ihre Elemente in einem Objekt. Siehe das Beispiel bei Plunker
index.html
directive.js:
template.html:
script.js:
Gibt es eine bessere Erklärung hier:
Winkel - ngModel nicht aktualisieren, wenn der Aufruf innerhalb ngInclude