我想在angularjs应用程序中使用路由,如下所示：
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>
Error: Unknown provider: $elementProvider <- $element
$element不是可注入的(它不是用AngularJS注入器注册的东西),所以你不能以这种方式将它传递给你的控制器.
原文链接：https://www.f2er.com/angularjs/143317.html您的productsCtrl,因此您的search()方法可以访问所有表单数据,因为ng-model指令设置了表单和控制器之间的双向绑定.例如,在search()方法中,您已经可以访问$scope.keywords这些关键字.
看看这是否适合你：
var dt = $($scope.keywords).serialize(); // or maybe just $scope.keywords.serialize();
更新：这个小提琴http://jsfiddle.net/michelpa/NP6Yk/似乎将$元素注入控制器. (我不确定如何/为什么这样有效……也许是因为控制器附加到表单标签/指令？)
更新#2：将$元素注入控制器是可能的,但是“与角度方式相反” – https://groups.google.com/d/msg/angular/SYglWP_x7ew/lFtb75NWNWUJ
正如评论中所提到的,我认为你的问题的答案是将表单数据放入一个更大的对象中并在$http请求中发送.
