javascript - 将数据从 Controller 传递到指令

Question

我正在尝试在指令中处理来自数据库的数据，但是这些数据由 Controller 提取并分配给如下范围:

日历 Controller :

'use strict';
var CalendarController = ['$scope', 'EventModel', function(scope, EventModel) {

    scope.retrieve = (function() {
        EventModel.Model.find()
            .then(function(result) {
                scope.events = result;

            }, function() {

            });
    }());

}];


adminApp.controller('CalendarController', CalendarController);

日历指令:

'use strict';
var calendarDirective = [function($scope) {

    var Calendar = {
        init: function(events) {
            console.log(events);
        }
    };

    return {
        link: function(scope) {
            Calendar.init(scope.events);
        }
    };
}];

adminApp.directive('calendarDirective', calendarDirective);

但是指令中的数据未定义，而在 Controller 中数据似乎没问题。

谢谢!

Answer 1

对于刚开始使用 AngularJS 的人来说，这是一个常见错误。这是一个加载顺序问题。执行指令链接函数时，未定义事件作用域变量。一种解决方案是对传递到指令的变量使用监视，并在定义后加载。

return {
    link: function(scope) {
        scope.$watch('events', function() {
          if(scope.events === undefined) return;

          Calendar.init(scope.events);
        });
    }
};