AngularJS:在回调函数中设置$ scope属性

时间:2013-02-03 17:35:19

标签: javascript angularjs directive

我正在尝试使用AngularUI指令日历并在我自己的指令中将其源代码设置在回调函数中(所以基本上我将指令包装到指令中)。

所以在html中使用我的指令是:

<calendar><calendar>

我的这个模板来自我的包装指令(calendar.html):

<div class="row-fluid" >
 <div data-ui-calendar="{height: 450,editable: false}" class="span8 calendar" data-ng-model="events"></div>
</div>

宣布了这个指令:

.directive('calendar', ['calendarFct', function(calendarFct) {
    return {
        restrict: 'E',
        templateUrl: 'partials/directives/calendar.html',
        link: function(scope, element, attrs) {
             var mainScope = scope;
             // load data from server
             calendarFct.getEvents(function(data) {
                 mainScope.events = data; // DOESN'T WORK
              });

             mainScope.events = data; // this would work, but I don't have "data" here
         }
     };

所以问题是我试图在回调函数中设置scope.events但它在浏览器中没有显示任何内容(但是执行了回调函数中的代码)。如果我在回调之外尝试它,它会工作,但我必须首先从服务器加载数据...如何使其工作?我认为mainScope的技巧可以起作用,甚至可以直接scope.events但不是。感谢

看起来像AngularUI的fullcalendar有些问题。我试图将指令模板更改为简单的输入框,并在回调函数中更改了与ng-model绑定的值,并且工作正常

2 个答案:

答案 0 :(得分:1)

我不是回答自己问题的粉丝,但它让我很紧张,而且解决方案并不十分“明显”。我以前有AngularUI v.0.3.0。所以我更新到0.3.2并且问题消失了:/

答案 1 :(得分:0)

尝试

scope.$apply(function(){
  mainScope.events = data;
});