javascript - angularJS 模板 url 不会自动加载

Question

1. 当我在输入 type="search" 中键入一个字符时，它正在加载。
2. 页面调用“ajax 调用”两次。请求在“单击”或“onPageload”时触发两次

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 调用两次并返回两个“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");
        });
    };

Answer 1

我很难理解你在这里做什么，但我至少可以看出一些问题。

我没有看到 Controller 的代码，也没有看到任何模板。为了让您的路由正常工作，应用程序的路由需要更改(最好在您的应用程序的 Controller 内)。例如，如果在 Controller 中调用 $location.path('/Search')，angular 将加载关联的模板并调用 Controller 。

如果您不介意在 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" });
    }]
    )

您没有在 route 指定任何 Controller 。为了执行搜索代码，您需要在子 Controller 中调用您的 Search 工厂。此外，您的第一条路线与您的 otherwise() 调用是多余的。

这Plunker摘自 AngularJS 文档应该可以帮助您。