6

次のように、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>

このコードを実行すると、(Google Chrome の) コンソールに次のエラーが表示されます。

Error: Unknown provider: $elementProvider <- $element

$elementproductsCtrl でを使用しているため、このエラーが発生したことがわかりました。しかし、その後、私は何をすべきですか？この問題を解決するにはどうすればよいですか?

4

2 に答える 2

4

$element は注入可能ではない (AngularJS インジェクターに登録されているものではない) ため、そのようにコントローラーに渡すことはできません。

フォームとコントローラ間の双方向バインディングを設定する ng-model ディレクティブにより、productsCtrl、したがって search() メソッドはすべてのフォーム データにアクセスできます。たとえば、search() メソッド内では、既に $scope.keywords としてキーワードにアクセスできます。

これがうまくいくかどうかを確認してください：

var dt = $($scope.keywords).serialize();  // or maybe just  $scope.keywords.serialize();

更新: このフィドルhttp://jsfiddle.net/michelpa/NP6Yk/は、コントローラーに $element を注入するようです。(それがどのように/なぜ機能するのかわかりません...おそらく、コントローラーがフォームタグ/ディレクティブに接続されているためですか?)

更新 #2 : コントローラーに $element を注入することは可能ですが、それは「角度のある方法に深く入り込む」- https://groups.google.com/d/msg/angular/SYglWP_x7ew/lFtb75NWNWUJ

コメントで述べたように、あなたの質問に対する答えは、フォーム データを 1 つの大きなオブジェクトに入れ、それを $http リクエストで送信することだと思います。

于 2012-09-19T19:17:23.553 に答える
-1

$element をコントローラーに挿入する必要はないと思います。むしろ、それを必要とする関数に引数として渡してみてください。なぜこれが正確に機能するのかわかりません：

<a ng-click="search($element)">
于 2012-09-19T15:41:23.443 に答える