个人中心
gpt4 book ai didi

angularjs - 两种方式数据绑定(bind)在指令中不起作用

转载 作者：行者123 更新时间：2023-12-04 20:33:13 24 4
gpt4 key购买 nike

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

数据从此 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)
                }
            ];
        }
     }]);

这是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() 在 Controller 和指令上更新 $scope，但它会引发错误“$apply 已经在进行中”。

正如我所说，我对 AngularJS 真的很陌生，我不知道如何使它工作，或者我是否在这里遗漏了一些东西。

希望你能帮忙。谢谢。

最佳答案

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

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

关于angularjs - 两种方式数据绑定(bind)在指令中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41163277/

24 4 0
文章推荐： ios - 如何将发射器节点移到前面？
文章推荐： python-3.x - 将 'r'前缀添加到python变量
文章推荐： raspberry-pi3 - Android Things 麦克风支持
文章推荐： SQL Server 性能提示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com