2016-03-03 64 views
0

美好的一天!javascript/angular - 无法获得确切的回复回复数据

我刚刚注册了stackoverflow,并提出了这个问题,因为我一直在通过搜索这个庞大而真棒的网站来淘汰这个问题。不幸的是,他们的问题和解决方案似乎没有帮助我。

这里是我的短js代码:

angular.module('myapp', []).controller('myController', ['$scope', '$http', '$window', function($scope,$http,$window) { 

...[more codes]... 

$scope.callMeMaybe = function(coverImageId) { 
    var THUMBNAIL_URL = './thumbnails/' + coverImageId; 
    var THUMBNAIL_DATA_URI = new String('data:image/jpg; base64, '); 
    var result = new String(''); 

    $http.get(THUMBNAIL_URL).then(function successCallback(response){ 
    var data = response.data; 
    result = new String(THUMBNAIL_DATA_URI.concat(data)); 
    $scope.loaded = true; 
    }, function errorCallback(response) { 
    $scope.loaded = false; 
    if (response.status === 403) { 
     $window.alert('You are forced logged out'); 
     $window.location = '/login/'; 
    } else { 
     $scope.elementBindingError(); 
    } 
    }); 
    console.log(result); 
    return result.valueOf(); 
}; 

... [some more codes] ... 
}]) 
.directive('myDirective', function(){ 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
    element.attr('src', scope.callMeMaybe(attrs.thumbnail)); 
    } 
} 
}); 

我似乎无法得到callMeMaybe功能级联反应数据。 该指令是我的一部分<img>标记

回答

0

当你有ajax调用时要注意你要返回的东西,如果它依赖于ajax的成功结果,那么你必须从成功回调本身返回结果,否则你如何期待成功的结果没有被称为成功的情况下被退回。所以原型应该是类似于下面的东西

 $scope.callMeMaybe = function (coverImageId,functionCompleteCallBack) { //pass a new function into this, with this function we will set the element src 

     // ... your other stuff 

     $http.get(THUMBNAIL_URL).then(function successCallback(response) { 
      var data = response.data; 
      result = new String(THUMBNAIL_DATA_URI.concat(data)); 
      $scope.loaded = true; 

      functionCompleteCallBack(result.valueOf()); //You need to execute the function passed as a callback. 

     }, function errorCallback(response) { 
      $scope.loaded = false; 
      if (response.status === 403) { 
       $window.alert('You are forced logged out'); 
       $window.location = '/login/'; 
      } else { 
       $scope.elementBindingError(); 
      } 
     });   
    }; 

}]) 

      // ... your other stuff 

.directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.callMeMaybe(attrs.thumbnail, function (elementSrc) { //note that we are passing a new function and set the element src inside this callback function 
       element.attr('src', elementSrc); 
      }); 
     } 
    } 
}); 

让我知道如果你有任何混淆。

+1

是的。我只是意识到它是异步调用的。我只是在输出之前和之后输出日志。 我明白你的解释。 我会尝试你的解决方案,如果我有一些困惑,回来。 –

+0

它的工作原理!谢谢。 –

0

这可能是由于异步调用而发生的。在获得数据之前就会发生callMeMaybe的回报。当调用successCallback/errorCallback时,您只应返回result。另外,请确保范围都是正确的 - 如果没有HTML,则无法看到该部分。

+0

是的。我只是意识到它是异步调用的。我只是在输出之前和之后输出日志。 –