Javascript angularJS模板url未自动加载 当我在inputtype=“search”中键入字符时,它正在加载 Page调用了两次“ajax调用”。请求在“单击”或“页面加载”时触发两次
index.Html 这是我的html文件,它有一个搜索框Javascript angularJS模板url未自动加载 当我在inputtype=“search”中键入字符时,它正在加载 Page调用了两次“ajax调用”。请求在“单击”或“页面加载”时触发两次,javascript,ajax,angularjs,angularjs-routing,ng-view,Javascript,Ajax,Angularjs,Angularjs Routing,Ng View,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="
<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>
在这里,我创建了一个服务,该服务调用将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");
});
};
.factory('Search'),[function($http,$scope){
返回{
fetchPopular:function($scope,callback){
$.ajax({
类型:“POST”,
url:'搜索',
数据:{search:$scope.globeSearch},
数据类型:“json”
}).
成功(函数(数据、状态、标题、配置){
控制台日志(数据);
if(data.data.length我很难理解您在这里做什么,但我至少看到了一些问题
我没有看到控制器的代码,也没有看到任何模板。为了使路由正常工作,应用程序的路由需要更改(最好是在应用程序的控制器内)。例如,如果在控制器内调用$location.path('/Search')
,angular将加载关联的模板并调用控制器
如果你不介意在或上放一个现场演示,我相信你会得到一些更有意义的帮助
编辑
我马上就看到了您最大的问题。让我们再看看您的路由配置
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
工厂。此外,您的第一条路由与否则()调用是冗余的
这来自AngularJS文档,应该可以帮助您。Vishal我没有在这里发布控制器n模板的代码。虽然我已经为这两个模板编写了代码。我给出了%location.path('Search')在控制器的函数调用中。我再说一遍。如果你不共享更多的代码,或者至少是一个类似的示例,我认为你不会得到太多帮助。:-)你需要给人们提供一些可以使用的东西。我在这里添加了更多数据,请查看和帮助。我卡在这里了…谢谢!!!:)问题现在解决了。需要添加“$location.apply()'在设置位置路径后。哇。我不太确定。$location.apply()
意味着您必须再次启动摘要循环。这可能会起作用,但这意味着您的角度应用程序运行不正常。您可能会在稍后遇到更大的错误。
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" });
}]
)