Zwei-Wege-Datenbindung funktioniert nicht in Direktive

Ich bin ziemlich neu in AngularJS und es ist das erste Mal, dass ich eine Direktive schreibe.Zwei-Wege-Datenbindung funktioniert nicht in Direktive

Ich versuche Bootstrap Year Calendar arbeiten mit AngularJS. Es ist ein jQuery-Plug-in, um einen Kalender mit Terminen anzuzeigen.

Ich habe diese Anweisung geschrieben, um den Kalender zu erstellen:

app.directive('calendarScheduler', [function() { 
     return { 
      restrict: 'A', 
      scope: { 
       calendarData: '=' 
      }, 
      link: function (scope, element, attrs, ctrl) { 
       element.calendar({ 
        enableRangeSelection: true, 
        dataSource: scope.calendarData 
       }); 
      } 
     } 
    }]);

Die Daten der Richtlinie von dieser Steuerung übergeben wird:

var app = angular.module('App', []) 

app.controller('UserCtrl', ['$scope', 
    function($scope) { 
     $scope.User = {}; 
     $scope.User.eventsData = []; 

     init(); 

     $scope.User.addData = function(startDate, endDate) { 
      $scope.User.eventsData.push({ 
       id: 2, 
       name: 'Apple Special Event', 
       location: 'San Francisco, CA', 
       startDate: new Date(2016, 6, 28), 
       endDate: new Date(2016, 6, 29) 
      }); 
     }; 

     function init() { 
      $scope.User.eventsData = [ 
       { 
        id: 0, 
        name: 'Google I/O', 
        location: 'San Francisco, CA', 
        startDate: new Date(2016, 4, 28), 
        endDate: new Date(2016, 4, 29) 
       }, 
       { 
        id: 1, 
        name: 'Microsoft Convergence', 
        location: 'New Orleans, LA', 
        startDate: new Date(2016, 2, 16), 
        endDate: new Date(2016, 2, 19) 
       } 
      ]; 
     } 
    }]);

Und hier ist der HTML:

<body ng-app="App"> 
    <div ng-controller="UserCtrl"> 
     <div 
      calendar-scheduler 
      id="calendar" 
      class="calendar" 
      calendar-data="User.eventsData"> 
     </div> 
     <button data-ng-click="UserHoliday.addData();">Add Data</button> 
    </div> 
</body>

Plunker showing the result

Alles funktioniert, wenn die Daten bei der Erstellung der Direktive übergeben werden, aber wenn ich auf die Schaltfläche klicke, um weitere Daten zum Kalender hinzuzufügen, aktualisiert es die angezeigten Daten nicht (Es sollte einen neuen Termin anzeigen). Dies zeigt auch nicht Daten geladen mit $ http. Ich habe $ scope. $ Apply() ausprobiert, um den $ scope sowohl auf dem Controller als auch auf der Direktive zu aktualisieren, aber es wird der Fehler "$ apply in progress" ausgegeben.

Wie ich schon sagte, ich bin wirklich neu in AngularJS, und ich weiß nicht, wie ich das machen soll, oder wenn mir hier etwas fehlt.

Ich hoffe, Sie können helfen. Vielen Dank.

Quelle

2016-12-15 Sergi

Sie binden die Daten nur einmal, so dass sie niemals aktualisiert werden. Statt ‚watch‘ die Datensammlung:

app.directive('calendarScheduler', [function() { 
    return { 
     restrict: 'A', 
     scope: { 
      calendarData: '=' 
     }, 
     link: function (scope, element, attrs, ctrl) { 
      function init() { 
       element.calendar({ 
        enableRangeSelection: true, 
        dataSource: scope.calendarData 
       }); 
      } 

      // re-init when data is changed 
      scope.$watchCollection("calendarData", function(val) { 
       // according to the documentation, data can be updated by doing: 
       element.data("calendar").setDataSource(val); 
      }); 

      init(); 

      scope.$on("$destroy", function() { 
       // not sure if this is supported by the library, 
       // but is a best practice to prevent memory leaks 
       element.calendar("destroy"); 
      }); 
     } 
    } 
}]);

Quelle

2016-12-15 11:55:59 devqon

die 'ngModel' Richtlinie nicht necesarry an sich in diesem Fall, was wichtig ist, ist kantig zu informieren, dass der Umfang durch Umfang geändert $ gelten seit JQuery Ereignisse, die außerhalb passieren. von eckigen. – Walfrat

Ja, ich habe es zuerst falsch gelesen, ich dachte, es wäre eine Eingabe :) – devqon

Es funktionierte wie ein Zauber. Vielen Dank!! Ich habe eine $ Uhr verwendet, aber es hat nur einmal die Daten aktualisiert (weiß nicht warum), wusste nichts über $ watchCollection. – Sergi

Zwei-Wege-Datenbindung funktioniert nicht in Direktive

Antwort

Verwandte Themen