Dwukierunkowe powiązanie danych nie działa w dyrektywie

Jestem dość nowa w AngularJS i po raz pierwszy piszę dyrektywę.Dwukierunkowe powiązanie danych nie działa w dyrektywie

Próbuję dokonać Bootstrap Year Calendar pracy z AngularJS. Jest to wtyczka jQuery do wyświetlania kalendarza z terminami.

Pisałem tę dyrektywę do tworzenia kalendarza:

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

Dane są przekazywane do dyrektywy z tego kontrolera:

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) 
       } 
      ]; 
     } 
    }]);

A oto 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

Wszystko działa, jeśli dane są przekazywane podczas tworzenia dyrektywy, ale jeśli kliknę przycisk, aby dodać więcej danych do kalendarza, nie aktualizuje on wyświetlanych danych (powinien pokazywać jedno nowe spotkanie). To również nie pokazuje danych załadowanych za pomocą $ http. Próbowałem $ scope. $ Apply(), aby zaktualizować $ scope, zarówno na kontrolerze, jak i dyrektywie, ale zgłasza błąd "$ apply already in progress".

Tak jak powiedziałem, jestem naprawdę nowy w AngularJS i nie wiem, jak wykonać tę pracę, lub jeśli czegoś tutaj brakuje.

Mam nadzieję, że możesz pomóc. Dzięki.

Źródło

2016-12-15 Sergi

Dane są wiążące tylko raz, więc nigdy nie zostaną zaktualizowane. Zamiast „zegarek” Gromadzenie danych:

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"); 
      }); 
     } 
    } 
}]);

Źródło

2016-12-15 11:55:59 devqon

Opcja 'dyrektywa ngModel' nie necesarry w sobie w tym przypadku ważne jest, aby poinformować, że zakres kątowy zmieniony poprzez zastosowanie od zakresu $ zdarzenia jQuery stało na zewnątrz. kątowy. – Walfrat

Tak, źle odczytałem, myślałem, że to będzie sygnał wejściowy :) – devqon

Zadziałało jak czar. Dziękuję Ci bardzo!! Użyłem zegarka $, ale zaktualizowałem dane tylko raz (nie wiem dlaczego), nie wiedziałem o $ watchCollection. – Sergi

Dwukierunkowe powiązanie danych nie działa w dyrektywie

Odpowiedz

Powiązane problemy