All geek questions in one place

Two-way data binding does not work in the directive

I am new to AngularJS and this is the first time I am writing a directive.

I am trying to make the Bootstrap Year Calendar work with AngularJS. This is a jQuery plugin for displaying a calendar with an appointment.

I wrote this directive to create a calendar:

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

Data is transferred to the directive of this controller:

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

And here is the 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 shows the result

Everything works if the data is transferred when creating the directive, but if I click on the button to add more data to the calendar, it will not update the data (it should show one new destination). It also does not show data downloaded using $ http. I tried $ scope. $ Apply () to update the $ scope, both on the controller and on the directive, but this raises the error "$ apply is already running."

As I said, I'm really new to AngularJS, and I don't know how to do this, or if I missed something.

I hope you can help. Thanks.

+5
source share
1 answer

You only bind data once, so it will never be updated. Instead, observe the data collection:

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

Source: https://habr.com/ru/post/1261327/

More articles:


All Articles