雙向數據綁定在指令中不起作用

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

如果數據是在創建指令時傳遞的，但是如果我單擊按鈕向日歷中添加更多數據，則它不會更新顯示的數據（它應該顯示一個新的約會）。這也不會顯示使用$ http加載的數據。我已經嘗試了$ scope。$ apply（）來更新控制器和指令中的$ scope，但是它會拋出一個錯誤「$ apply already 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

雙向數據綁定在指令中不起作用

回答

相關問題