错误：未知提供商：$ elementProvider＆LT; - $元 [英] Error: Unknown provider: $elementProvider <- $element
问题描述
我试图在angularjs应用程序中使用的路由如下：
i am trying to use routing in angularjs application as follows:
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
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的
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
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>
当我运行该code我得到以下错误控制台（谷歌浏览器）：
when i run this code i get the following error in the console(of google chrome) :
Error: Unknown provider: $elementProvider <- $element
我才知道发生这个错误，因为我使用的productsCtrl的 $元素。但后来我应该怎么办？
我该怎么解决这个问题呢？
i came to know that this error occurred because i am using the $element in the productsCtrl. but then what should i do?
how do i solve this problem?
推荐答案
<击> $元素不是注射（它不是与AngularJS注射器登记的东西），所以你不能把它传递到您的控制器方式。
您productsCtrl，因此搜索（）方法，可以访问所有，因为NG-模型指令的表单数据，表单和你的控制器之间进行安装的双向绑定的。例如，搜索（）方法中，你已经获得了关键字$ scope.keywords。
Your productsCtrl, and hence your search() method, has access to all of the form data because of the ng-model directives, which setup two-way binding between your form and your controller. E.g., inside your search() method, you already have access to the keywords as $scope.keywords.
请参阅如果这对你的作品：
See if this works for you:
var dt = $($scope.keywords).serialize(); // or maybe just $scope.keywords.serialize();
更新：这个小提琴 http://jsfiddle.net/michelpa/NP6Yk/ 似乎$元件注入的控制器。 （我不知道如何/为什么会工作... ...也许是因为控制器连接到一个表单标签/指令？）
Update: this fiddle http://jsfiddle.net/michelpa/NP6Yk/ seems to inject $element into a controller. (I'm not sure how/why that works... maybe because the controller is attached to a form tag/directive?)
更新＃2 ：注射$元素到控制器是可能的，但深藏在对角的方式 - 的 https://groups.google.com/d/msg/angular/SYglWP_x7ew/lFtb75NWNWUJ
Update #2: injecting $element into a controller is possible, but that "goes deep against the angular way" -- https://groups.google.com/d/msg/angular/SYglWP_x7ew/lFtb75NWNWUJ
正如评论中提到，我想回答你的问题是把你的表单数据到一个单一的，更大的对象，并一起发送，在您的$ HTTP请求。
As mentioned in the comments, I think the answer to your question is to put your form data into a single, larger object and send that along in your $http request.
这篇关于错误：未知提供商：$ elementProvider＆LT; - $元的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
