angularjs – 双向数据绑定在指令中不起作用

发布时间：2020-12-17 10:23:52 所属栏目：安全来源：网络整理

导读：我是AngularJS的新手,这是我第一次写指令. 我正在努力让Bootstrap Year Calendar与AngularJS一起工作.它是一个jQuery插件,用于显示带约会的日历. 我写了这个指令来创建日历： app.directive('calendarScheduler',[function () { return { restrict: 'A',scop

我是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,29)
            });
        };

        function init() {
            $scope.User.eventsData = [
                {
                    id: 0,name: 'Google I/O',4,29)
                },{
                    id: 1,name: 'Microsoft Convergence',location: 'New Orleans,LA',2,16),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的新手,我不知道如何使这项工作,或者如果我在这里遗漏了一些东西.

希望你能帮忙.谢谢.

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

app.directive('calendarScheduler',[function () {
    return {
        restrict: 'A',scope: {
            calendarData: '='
        },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");
            });
        }
    }
}]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!