1
  1. input に char を入力するとロードされますtype="search"。
  2. ページが 'ajax call' を 2 回呼び出しています。「シングルクリック」または「onPageload」でリクエストが2回発生する

index.Html

これは、検索ボックスを持つ私のhtmlファイルです

<div>
    <div class="input-group">
        <input type="search" class="form-control search" ng-model="searchtag" tabindex="1">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit" ng-click="search()"></button>
        </div>
        <ng-view></ng-view>
    </div>

この検索ボックスは添付されていませんが、なぜこのようなばかげたことが起こっているのでしょうか??

テンプレートの URL がこれにロードされていますng-view

index.js ファイル:

ここでは、テンプレート URL のルーティングの構成を定義しました。

angular.module("myApp", ['ngRoute'])
    .config(["$routeProvider", function($routeProvider) {
        $routeProvider.
            when("/", { templateUrl: "pic.html" }).
            when("/Search", { templateUrl: "pic.html" }).
            when("/VipList", { templateUrl: "cust.html" }).
            otherwise({ redirectTo: "/", templateUrl: "pic.html" });
    }]
    )

ここでは、ajax 呼び出しをサーバーに送信し、json オブジェクトを返すサービスを作成しました。各リクエストでajax呼び出しを2回呼び出し、2つの「Json」データオブジェクトを返します。

.factory('Search', [function($http, $scope) {
    return {
        fetchPopular: function($scope, callback) {

            $.ajax({
                type: "POST",
                url: 'Search',
                data: {search : $scope.globeSearch},
                dataType: 'json'
            }).
                success(function(data, status, headers, config) {
                    console.log(data);
                    if(data.data.length<=0){
                        alert("No data found");
                    }
                    callback(data.data);
                })
                .error(function(data, status, headers, config) {
                });
        }
    };
}
])

.controller("fetch", function($scope, $interval, $location, Search) {

    $scope.globeSearch="Sachin";

    $scope.pics = [];
    $scope.have = [];
    $scope.orderBy = "-comments.count";
    $scope.getMore = function(callback) {
        Search.fetchPopular($scope, function(data) {

            for(var i=0; i<data.length; i++) {
                if (typeof $scope.have[data[i].id]==="undefined") {
                    $scope.pics.push(data[i]) ;
                    $scope.have[data[i].id] = "1";
                }
            }
            $location.path("/Search");
        });
    };


    $scope.getMore();

    $scope.searchPopular = function(callback) {

        if($scope.searchStr!=null && $scope.searchStr!=""){ $scope.globeSearch=$scope.searchStr; }

        $scope.pics = [];
        $scope.have = [];
        $scope.orderBy = "-comments.count";
        Search.fetchPopular($scope, function(data) {
            for(var i=0; i<data.length; i++) {
                if (typeof $scope.have[data[i].id]==="undefined") {
                    $scope.pics.push(data[i]) ;
                    $scope.have[data[i].id] = "1";
                }
            }
            $location.path("/Search");
        });
    };
4

1 に答える 1

2

あなたがここで何をしているのか理解するのに苦労していますが、少なくともいくつかの問題は見られます。

コントローラーのコードもテンプレートも表示されません。ルーティングを機能させるには、アプリケーションのルートを変更する必要があります (理想的には、アプリのコントローラー内で)。たとえば、 を呼び出したコントローラー内で$location.path('/Search')、angular は関連するテンプレートをロードし、コントローラーを呼び出します。

PlunkerまたはJSFiddleにライブ デモを掲載することを気にしない場合は、より有意義なヘルプが得られると確信しています。

編集

あなたの最大の問題はすぐにわかります。ルーティング構成をもう一度見てみましょう。

angular.module("myApp", ['ngRoute'])
    .config(["$routeProvider", function($routeProvider) {
        $routeProvider.
            when("/", { templateUrl: "pic.html" }).
            when("/Search", { templateUrl: "pic.html" }).
            when("/VipList", { templateUrl: "cust.html" }).
            otherwise({ redirectTo: "/", templateUrl: "pic.html" });
    }]
    )

ルート内でコントローラーを指定していません。検索コードを実行するにはSearch、子コントローラー内でファクトリを呼び出す必要があります。また、最初のルートはotherwise()通話と重複しています。

AngularJS のドキュメントから取得したこのPlunkerが役に立ちます。

于 2014-04-24T17:14:05.313 に答える