双方向データバインディングがディレクティブで機能していません

私はAngularJSにはかなり新しく、ディレクティブを書くのは初めてです。双方向データバインディングがディレクティブで機能していません

私はBootstrap Year CalendarをAngularJSで使用しようとしています。予定付きカレンダーを表示するのはjQueryプラグインです。

私はカレンダーを作成するには、このディレクティブを書いた

：

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

データはこのコントローラからの指令に渡されます。

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

そして、ここでは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

ディレクティブの作成時にデータが渡されるとすべて動作しますが、ボタンをクリックしてカレンダーにデータを追加すると、表示されたデータは更新されません（新しいアポイントが1つ表示されます）。これは、$ httpを使用してロードされたデータも表示しません。コントローラとディレクティブの両方で$ scope。$ apply（）を使って$ scopeを更新しようとしましたが、 "$ apply already in progress"というエラーが発生します。

私が言ったように、私はAngularJSにとって本当に新しく、この作業をどうやって行うのか、私がここで何かを逃しているのか分かりません。

希望すると助かります。ありがとう。

出典

2016-12-15 Sergi

データは一度だけバインドされるため、更新されません。代わりに、データ収集の「時計」：

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

出典

2016-12-15 11:55:59 devqon

'ngModel'ディレクティブは、その場合には、それ自体にはnecesarryされていないが、重要なのは、スコープがスコープを介して変更することを角度通知することであるjQueryのイベントが外部に起こるので、$が適用されます。角度の – Walfrat

ええ、私は間違ってまずそれを読む、私はそれが入力されると思った:) – devqon

それは魅力のように働いた。どうもありがとうございました！！私は$ watchを使用しましたが、データを一度更新しただけです（理由は分かりません）。$ watchCollectionについては知りませんでした。 – Sergi

双方向データバインディングがディレクティブで機能していません

答えて

関連する問題