Erreur: Inconnu fournisseur de: $elementProvider <- $element
je suis en train d'utiliser le routage dans angularjs application comme suit:
app.js
angular.module('productapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl}).
//~ when('/productapp/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/productapp'});
}]);
controller.js
function productsCtrl($scope, $http, $element) {
//~ $scope.url = 'php/search.php'; //The url of our search
//The function that will be executed on button click (ng-click="search()")
$http.get('php/products.php').success(function(data){
alert("hi");
$scope.products = data;
});
$scope.search = function() {
var elem = angular.element($element);
var dt = $(elem).serialize();
dt = dt+"&action=index";
alert(dt);
console.log($(elem).serialize());
$http({
method: 'POST',
url: 'php/products.php',
data: dt,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data, status) {
//console.log(data);
$scope.products = data; //Show result from server in our <pre></pre> element
}).error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
}; //....
index.html
<html ng-app = "productapp">
<head>
<title>Search form with AngualrJS</title>
<script src="../angular-1.0.1.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/products.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
productList.html
<div>
<label>Search</label>
<input type="text" name="searchKeywords" ng-model="keywords" placeholder="enter name..." value="{{rs.name}}">
<button type="submit" ng-click="search()">Search</button>
<label>Add New Product:</label>
<input type="text" name="keywords" ng-model="rs.name" placeholder="enter name..." value="{{rs.name}}">
<input type="text" name="desc" ng-model="rs.description" placeholder="enter description..." value="{{rs.description}}">
<button type="submit" ng-click="add()">Add</button>
<button type="submit" ng-click="save(rs.product_id)">Save</button>
<p>enter product name...</p>
<table border='2'>
<th>Name</th>
<th>Description</th>
<th>Edit</th>
<th>Delete</th>
<tr ng-repeat="product in products" ng-model = 'products'>
<td>{{product.name}}</td>
<td>{{product.description}}</td>
<td><a href='' ng-click = "fetch(product.product_id)">edit</a></td>
<td> <a href='' ng-click = "del(product.product_id)" ng-hide="isHidden">delete</a></td>
</tr>
</table>
</div>
lorsque j'exécute ce code j'obtiens l'erreur suivante dans la console(google chrome) :
Error: Unknown provider: $elementProvider <- $element
je suis venu pour savoir que cette erreur s'est produite parce que je suis en utilisant le $element
dans le productsCtrl. mais alors, que dois-je faire?
comment puis-je résoudre ce problème?
OriginalL'auteur z22 | 2012-09-19
Vous devez vous connecter pour publier un commentaire.
$element n'est pas injectable (il n'est pas quelque chose qui est inscrit auprès de l'AngularJS injecteur), de sorte que vous ne pouvez pas passer dans votre contrôleur.Votre productsCtrl, et donc votre méthode search (), a accès à toutes les données du formulaire en raison de la ng-model directives d'installation de la liaison bidirectionnelle entre votre forme et de votre contrôleur. E. g., à l'intérieur de votre méthode search (), vous avez déjà accès à des mots-clés comme $champ d'application.mots-clés.
Voir si cela fonctionne pour vous:
Mise à jour: ce violon http://jsfiddle.net/michelpa/NP6Yk/ semble injecter $element dans un contrôleur. (Je ne suis pas sûr de savoir comment/pourquoi cela fonctionne... peut-être parce que le contrôleur est connecté à une balise de formulaire/directive?)
Mise à jour #2: injecter $element dans un contrôleur est possible, mais que "va profondément à l'encontre de l'angle de façon" -- https://groups.google.com/d/msg/angular/SYglWP_x7ew/lFtb75NWNWUJ
Comme mentionné dans les commentaires, je pense que la réponse à votre question est de mettre votre formulaire de données en une seule, plus grande de l'objet et l'envoyer dans votre $requête http.
Lecture autour, il semble que vous ne devriez pas avoir à utiliser jQuery serialize() de la méthode. Voir si elles contribuent à l' (notez que $xhr a été remplacé par $http): groups.google.com/d/msg/angular/ySpF18OiETo/uyKCM1oWknAJ et deansofer.com/posts/view/14/... -- ici Doyen suggère de mettre toutes vos données de formulaire dans un grand objet, d'où <input type="text" name="searchKeywords" ng-model="les données.mots-clés"
merci s'accoupler! la solution donnée dans groups.google.com/forum/#!msg/angulaire/ySpF18OiETo/uyKCM1oWknAJ fonctionne. j'ai utilisé $(elem.parent()).serialize() pour le faire fonctionner.
ouais, ce ne serait pas très "angulaire" façon de faire les choses. Je voudrais avoir un modèle contenant un tableau d'objets et pour chacune de ces ng-foreach générer les éléments de formulaire, puis il suffit de sérialiser l'objet.
OriginalL'auteur Mark Rajcok
Je ne pense pas que vous avez besoin d'injecter $element dans votre contrôleur. Plutôt, essayer de passer en argument à la fonction dont il a besoin. Je ne sais pas exactement pourquoi cela fonctionne:
Cela ne fonctionne pas pour moi non plus
OriginalL'auteur grendian