AngularJS с $ HTTP

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 вам нужно сделать 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

Если поставить предупреждение в успех(), вы увидите, что она вызывается. Однако вам лучше справиться с этой ошибкой.

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 3

Это трудно сказать, что это не так просто из предоставленного кода, попробуйте подключить функцию обратного вызова ошибки в $http так:

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

Если ошибка был вызван обратный вызов, это означает, что ваш бэкэнд ответил на ошибку. Если обратный вызов ошибки не был вызван, вы можете проверить вкладку «Сеть» для инструментов разработчика Chrome, чтобы узнать, был ли запрос выполнен или нет.

Answer 4

попробовать это:

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 
       }); 
      }); 
     }; 
    });