AngularJS：在回调函数中设置 $scope 属性答案

【问题标题】：AngularJS: set $scope property in callback functionAngularJS：在回调函数中设置 $scope 属性
【发布时间】：2013-02-03 17:35:19
【问题描述】：

我正在尝试使用 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 的完整日历似乎有些问题。我尝试将指令模板更改为简单的输入框，并在回调函数中更改了与 ng-model 绑定的值，它工作正常

【问题讨论】：

标签： javascript angularjs directive

【解决方案1】：

我不喜欢回答自己的问题，但这让我很紧张，而且解决方案也不是很“明显”。我曾经有 AngularUI v.0.3.0。所以我更新到 0.3.2 并且问题消失了：/

【讨论】：

【解决方案2】：

试试看

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

【讨论】：

不幸的是，这会引发异常：错误：$digest 已经在错误（）处开始阶段（app/lib/angular/angular.js:8067:15）