Question

我试图在指令中处理来自我的数据库的数据，但这些数据是由控制器提取的，并被分配到这样的范围：

日历控制器：

'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);

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

谢谢！

Answer 1

对于刚开始使用AngularJS的人来说，这是一个常见错误。这是一个加载订单问题。执行指令链接功能时，未定义事件范围变量。一种解决方案是对传递给指令的变量使用监视，并在定义后加载。

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

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

Answer 2

在上面的场景中，控制器和指令具有隔离范围。一种解决方案是使用工厂/服务与服务器通信并将服务注入控制器和指令。由于服务/工厂是单身，您可以缓存数据＆amp;控制器和控制器之间的共享指令。

Answer 3

尝试这种方式。

指令html

<calendar-directive objEvent="events" ></calendar-directive >

JS：

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


    return {
        scope : { objEvent : '=objEvent'}
        template: '<div>{{ objEvent }}</div>',
    };
}];

使用有角度的isolated scopes。

将数据从控制器传递到指令

3 个答案: