Javascript 路由提供者混淆
Angular JS的新功能,但这不应该真的给我带来任何问题,但确实如此 好的,我的设置如下: app/storelocator.html app/stores.html 因此,我想从storelocator.html导航到各个商店页面,使用以下格式:Javascript 路由提供者混淆,javascript,angularjs,Javascript,Angularjs,Angular JS的新功能,但这不应该真的给我带来任何问题,但确实如此 好的,我的设置如下: app/storelocator.html app/stores.html 因此,我想从storelocator.html导航到各个商店页面,使用以下格式: <div ng-controller="StoreController as store" class="row" ngcloak> <form method='get' id='searchForm' ng-c
<div ng-controller="StoreController as store" class="row" ngcloak>
<form method='get' id='searchForm' ng-controller="StoreController as storeCtrl" ng-submit="store.submit()">
<label for="postcode" class="controls__label">Postcode</label>
<input type="text" name="postcode" placeholder="Search..." ng-model="store.postcode">
<input type="submit" value="Search">
</form>
<br />
<section class="cards">
<header ng-show="store.postcode">
<h2>You searched for {{store.postcode}}</h2>
</header>
<article ng-repeat="store in store.stores" class="card">
<address>
<h3 ng-if="store.outlet" class="title">{{store.outlet}}</h3>
<p ng-if="store.phone" class="tel">t. {{store.phone}}</p>
<p class="address1"><span ng-if="store.addressOne">{{store.addressOne}}, <br /></span>
<span ng-if="store.addressTwo">{{store.addressTwo}}, <br /> </span>
<span ng-if="store.addressThree">{{store.addressThree}}, <br /></span>
<span ng-if="store.town">{{store.town}}, <br /></span>
<span ng-if="store.county">{{store.county}}, <br /></span>
<span ng-if="store.postCode">{{store.postCode}}</span>
<span ng-if="store.distance">{{store.distance}}</span>
</p>
<a class="btn btn--primary" href="/app/stores/{{store.outlet}}">View Store</a>
</address>
</article>
</section>
</div>
我做错了什么?似乎无法解决这个问题。代码中的错误太多了。我将指出两件主要的事情:你甚至没有定义商店详细信息的路由,你没有打开HTML5路由模式,因此你的链接没有“#”就无法工作。您最好从以下工作示例开始:
同样,下次请告诉我们到底哪里出了问题和你想实现什么。错误日志和在线工作代码示例(如Plunker或JSBin)也很有用。很抱歉,我没有发布任何错误日志,因为没有。我通常试着做密码笔,但第一天回到办公室,我还是有点迷茫我不知道商店详细信息的路由是什么意思,我看过的所有资源中,没有一个提到HTML5路由模式,可能他们假设的太多了。很抱歉,我理解这可能会让人沮丧。代码中另一件让人困惑的事情是:您声明有storelocator.html和stores.html模板,但在路由器配置中引用index.html。正如我所说,你最好从工作的例子开始。不提其他奇怪的事情,比如在表单上子引用StoreController等。请注意,很抱歉浪费了大家的时间。加载页面时,开发人员控制台中是否出现任何错误?
'use strict';
angular.module('store',["ngRoute"])
.config(["$routeProvider", function ($routeProvider) {
$routeProvider
.when('/',
{
templateURL: "index.html",
controller: "StoreController",
controllerAs: "app"
})
.when('/stores', {
template: "store page"
})
.otherwise({
template: "This doesn't exist"
})
}])
.controller('StoreController', ['$http',function($http){
var store = this;
store.stores = [];
$http.get('my/json/file').success(function(data){
store.stores = data;
});
store.submit = function() {
$http.get('my/json/file' + store.postcode).success(function(data){
store.stores = data;
});
};
}]);