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

Plunker hier

Schreibe einen Kommentar