Question

我正在尝试使用angular 1.5.0-beta2

创建一个指令

我想在该指令中使用http请求并将数据粘贴到视图中。通常它是使用$ scope完成的，但似乎我不能在指令中使用$ scope。

到目前为止，这是我的代码：

app.directive('latestDrinks', ['ParseGlobalImageIdService',function (ParseGlobalImageIdService) {
    return {
        restrict: 'E',
        templateUrl: 'views/latest-drinks.html',
        controller: ['$http','$scope', function($http,$scope) {
            $scope.latestDrinksRows =  $http({
                method: 'GET',
                url: 'http://api.myalcoholist.com:8888/cocktail/get_latest_drinks'
            }).then(function successCallback(response) {
                response.data.forEach(function (element, index, array) {
                    element.global_image_id = ParseGlobalImageIdService.thumb(element.global_image_id);
                })
                return response.data;
            }, function errorCallback(response) {
                alert('error');
                return null;
            });
        }],
    }}]);

正如您在返回对象的controller属性中看到的那样，我尝试注入$ http和$ scope。并使用$ scope设置latestDrinksRows，以便能够在视图中使用它。

我遇到的问题是当我尝试在视图中打印变量时

{{latestDrinksRows}}

我得到一个空物体。

我检查了chrome检查器，正确发送了http请求，并返回了有效的json数据。

我也google了很多，我注意到没有人真的试图在控制器属性中扩展$ scope，所以我猜我错过了什么。

非常感谢有关该问题的任何信息。

Answer 1

您没有正确使用$ http。目前，您将承诺传递给$ scope变量，而您希望将$ http调用的结果分配给该变量，这需要类似以下内容

        $http({
            method: 'GET',
            url: 'http://api.myalcoholist.com:8888/cocktail/get_latest_drinks'
        }).then(function successCallback(response) {
            response.data.forEach(function (element, index, array) {
                element.global_image_id = ParseGlobalImageIdService.thumb(element.global_image_id);
            })
            // ************************
            $scope.latestDrinksRows =  response.data;

        }, function errorCallback(response) {
            alert('error');
            return null;
        });

Answer 2

您将范围变量设置为$http的返回值，这只是一个承诺。您需要在.then处理函数中设置所需的数据，这是您获取HTTP响应的位置。

Answer 3

为您的指令添加范围：

app.directive('latestDrinks', ['ParseGlobalImageIdService',function (ParseGlobalImageIdService) {
    return {
        restrict: 'E',
        scope: {
             param: '='
        }
        ...
    }}]);

在您的视图中，为您的元素添加“param”属性：

<latestDrinks param="myModel"></latestDrinks>

而不是myModel将你想要与你的指令共享的对象放在你的指令函数的params中：

controller: ['$http','scope', function($http,scope) {
            $http({
                method: 'GET',
                url: 'http://api.myalcoholist.com:8888/cocktail/get_latest_drinks'
            }).then(function successCallback(response) {
                scope.param = response
            });
        }],

在使用angular的指令中使用$ scope

3 个答案: