angularjs - 带有 $http 的 AngularJS

Question

我正在为 onclick 编写自定义指令：

//add favourite
app.directive('addfavourite',
    function ($rootScope, $http) {
        return function (scope, element, attrs) {
            element.bind('click', function () {
                //fire off $http
                $http({
                    method: 'GET',
                    url: attrs['url']
                }).success(function (data, status) {
                        $rootScope.user_favourites = data.user_favourites
                    });
            });
        };
    });

我遇到了一个奇怪的问题，$http 调用永远不会被执行。控制台中没有错误，只是没有任何反应。如果我在 $http 调用之前在函数中放置一个警报，它会发出警报，但 $http 调用永远不会进行。难道我做错了什么？

非常感谢，本

Answer 1

从 angularJS 1.1.4 开始，如果不是从 Angular 摘要循环的上下文开始，您需要执行 scope.apply 来启动 http。所以 ：

//add favourite
app.directive('addfavourite',
    function ($rootScope, $http) {
        return function (scope, element, attrs) {
            element.bind('click', function () {
                //fire off $http
                $http({
                    method: 'GET',
                    url: attrs['url']
                }).success(function (data, status) {
                        $rootScope.user_favourites = data.user_favourites
                    });
                // Run the digest loop :
                $rootScope.$apply();
            });
        };
    });

Answer 2

尝试这个 ：

HTML

<input type="text" name="text1" url="/api/testurl" addfavourite="addfavourite" ng-model="test"/>

指示：

angularApp.directive('addfavourite',
    function($rootScope, $http) {
        return function(scope, element, attrs) {
            element.bind('click', function() {
                //fire off $http
                var u = attrs.url;
                $http({
                    method: 'GET',                  
                    url: u
                }).success(function(data, status) {
                    $rootScope.user_favourites = data.user_favourites
                });
            });
        };
    });

Answer 3

如果你在success()中加入alert，你会看到它被调用了。但是，您最好也处理该错误。

function ($rootScope, $http) {
    return function (scope, element, attrs) {
        element.bind('click', function () {
            //fire off $http
            $http({
                method: 'GET',
                url: attrs['url']
            }).success(function (data, status) {
                console.log('called');
                $rootScope.user_favourites = data.user_favourites
            }).error(function (data, status) {
                //error handling
            });
        });
    };
});

Demo

Answer 4

仅从提供的代码很难判断出了什么问题，尝试$http像这样附加错误回调：

$http({
    method: 'GET',
    url: attrs['url']
}).success(function (data, status) {
    $rootScope.user_favourites = data.user_favourites
}).error(function() {
    console.log('error')
});

如果错误回调已被调用，则意味着您的后端以错误响应。如果错误回调没有被调用，你可以查看chrome开发者工具的Network选项卡查看请求是否已经发出。