Yönergede iki yönlü veri bağlama çalışmıyor

AngularJS için oldukça yeni ve ilk defa bir yönerge yazıyor.Yönergede iki yönlü veri bağlama çalışmıyor

AngularJS ile çalışıyorum Bootstrap Year Calendar çalışıyorum. Randevular ile bir takvim göstermek için jQuery eklentisidir.

ben takvim oluşturmak için bu yönergeyi yazdık:

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

veriler, bu denetleyicisinden direktifi geçirilir:

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

: Burada

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

Ve HTML'dir

Plunker showing the result

Veriler yönerge oluşturulurken iletilirse her şey çalışır, ancak takvime daha fazla veri eklemek için düğmeyi tıklatırsam, gösterilen verileri güncelleştirmez (Yeni bir randevu göstermelidir). Bu ayrıca $ http kullanarak yüklenen verileri göstermez. $ kapsamını denedim. $ Kapsamını() denetleyicide ve yönergesinde $ kapsamını güncelleştirmek için denedim, ancak "$ devam etmekte olan bir hata" hatası veriyor.

Dediğim gibi, AngularJS için gerçekten yeniyim, ve bu işi nasıl yapacağımı bilmiyorum, yoksa burada bir şey eksik olursam.

Yardım edersiniz. Teşekkürler.

kaynak

2016-12-15 Sergi

Verileri yalnızca bir kez bağlarsınız, bu nedenle hiçbir zaman güncellenmez. Bunun yerine 'izle' veri toplama:

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

kaynak

2016-12-15 11:55:59 devqon

'ngModel' direktifi bu durumda kendi içinde necesarry değil, önemli olan kapsam dürbünüyle değişti açısal bilgilendirmektir jQuery olayları dışında gerçekleşen bu yana $ geçerlidir. açısal – Walfrat

Evet, önce yanlış okudum, bir giriş olacağını düşündüm :) – devqon

Bir çekicilik gibi çalıştı. Çok teşekkür ederim!! $ watch kullanmıştım ancak verileri bir kez güncellediler (nedenini bilmiyorum), $ watchCollection hakkında bilmiyordum. – Sergi

Yönergede iki yönlü veri bağlama çalışmıyor

cevap

İlgili konular