AngularJS v1中出现Cannot read property 'success' of undefined错误求助

Hey there, let's break down why this error is popping up and fix it step by step:

Root Cause #

This error happens because the $http service isn't properly injected into your directive. In your original code, you defined the directive's factory function without listing $http as a dependency—so when your chitFundCtrl (the link function) tries to use $http, it's actually undefined, hence the "can't read 'success' of undefined" error.

Step 1: Fix Dependency Injection #

You need to explicitly inject $http into the directive's factory function so it gets passed to your link controller correctly. Here's the corrected code:

'use strict'; 
(function () { 
angular.module('loan-apply.directive.module') 
.directive('chitSlider', ['$http', function ($http) { // Inject $http here
return { 
restrict: 'E', 
templateUrl: 'src/modules/loan-apply/directives/chit-slider/chit-slider.html', 
link: function($scope, element) { 
  // Pass the injected $http to your controller function
  chitFundCtrl($scope, $http, element);
} 
} 
}); 

function chitFundCtrl($scope, $http, element) { 
$http.get('src/temp/chit-fund-data.json') 
.success(function (data) { 
$scope.Details = data; 
}) 
.error(function(data, status, headers, config) { 
// Log error details here
console.error('Failed to load chit fund data:', status);
}); 
setTimeout(function () { 
$(element).find('md-radio...'); // Make sure this code block is completed!
});
})();

Alternatively, you can use AngularJS's array syntax to inject dependencies directly for the link function, which is cleaner for maintainability:

'use strict'; 
(function () { 
angular.module('loan-apply.directive.module') 
.directive('chitSlider', ['$http', chitSliderDirective]);

function chitSliderDirective($http) {
  return {
    restrict: 'E',
    templateUrl: 'src/modules/loan-apply/directives/chit-slider/chit-slider.html',
    link: ['$scope', '$http', 'element', chitFundCtrl]
  };
}

function chitFundCtrl($scope, $http, element) { 
// Your existing logic here
$http.get('src/temp/chit-fund-data.json') 
.success(function (data) { 
$scope.Details = data; 
}) 
.error(function(data, status) { 
console.error('Error loading data:', status);
}); 
setTimeout(function () { 
$(element).find('md-radio...');
});
})();

Step 2: (Optional but Recommended) Use Modern Promise Syntax #

Just a heads-up: In AngularJS 1.6 and later, the .success() and .error() methods are deprecated. For better compatibility and standard promise behavior, switch to .then() and .catch():

$http.get('src/temp/chit-fund-data.json')
.then(function(response) {
  $scope.Details = response.data; // Note: .then() returns a response object, not raw data
})
.catch(function(error) {
  console.error('Failed to fetch chit fund data:', error);
});

Quick Additional Checks #

• Double-check that your JSON file path (src/temp/chit-fund-data.json) is correct relative to your app's root directory
• If you're using $(element), make sure jQuery is loaded before AngularJS (or use AngularJS's built-in jqLite methods instead to avoid dependency on jQuery)

内容的提问来源于stack exchange，提问作者jeevi