Question

我是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 has in progress”。

正如我所说，我是AngularJS的新手，我不知道如何使这项工作，或者我在这里遗漏了什么。

希望你能提供帮助。感谢。

Answer 1

您只绑定一次数据，因此永远不会更新。而是“观察”数据收集：

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

双向数据绑定在指令

1 个答案: