Question

我有这个指令：

app.directive('changemonth', function($animator) {
    return {
      link : function($scope, element, attrs) {
        element.bind("click", function() {

          if(element.attr('class').search('disabled') == -1) {

            // récupération du calendrier :
            if(element.attr('class').search('day') != -1)
              var calendar = angular.element(element.parent().parent());
            else                                         
              var calendar = angular.element(element.parent().parent().next().children()[1]);
            var animator = $animator($scope, attrs);

            animator.hide(calendar); 
            setTimeout(function() { 
              $scope.$apply(attrs.changemonth);
              animator.show(calendar); 
            }, 500);
          }
        });
      }
    };
});

使用attrs.changemonth，我调用一个函数（可以更改），例如：

$scope.next = function() {
        var tmpMonth = $scope.monthsLabels.indexOf($scope.monthDisplayed) + 1;
        var tmpYear = $scope.yearDisplayed;
        if(tmpMonth==12) {
            tmpMonth = 0;
            tmpYear = parseInt($scope.yearDisplayed) + 1;
        }
        getCalendar(tmpMonth, tmpYear);
        $scope.monthDisplayed = $scope.monthsLabels[tmpMonth];
        $scope.yearDisplayed = tmpYear.toString();
    };

所以这个函数调用另一个getCalendar()，你可以在这里看到：

function getCalendar(month, year) {
        $http({
            method : "GET", 
            url : 'http://my_url/getCalendar', 
            params : { 
                group_id : $scope.group_id,
                month : month,
                year : year
            }
        })
        .success(function(data) {
            $scope.calendar = data;
        });
    }

getCalendar()使用$http从数据库中获取日历。

我的问题是我想在指令中使用animator之前等待$http的响应，就像这样，我的日历只会在加载内容时显示。

我听说过$q和承诺。但我不知道如何在这个非常特殊的背景下使用它。

如果有人在这里有想法，那就太棒了。

Answer 1

尝试从您的成功回调广播。

.success(function(data) {
    $scope.calendar = data;
    $rootScope.$broadcast('event:calendar-received');
});

然后在你的指令中，你可以等待接收这样的信号。

$scope.$on('event:calendar-received', function() {
    ... do your stuff with animator...
});

Answer 2

$http(...)评估承诺。这意味着给定

var x = $http(...)

你可以做到

x.then(function success(){...}, function failure(){...});

并且只有在解析了promise时才会调用success或failure函数。查看承诺API。

您的函数可以返回此x，并且它们的调用函数可以作为承诺与它进行交互。

AngularJS设置指令的同步函数调用

2 个答案: