Question

Angular JS的新功能，但这不应该给我带来任何问题，但事实确实如此。

好的，所以我的设置是这样的：

应用程序/ storelocator.html 应用程序/ stores.html

因此，从storelocator.html我想使用以下格式导航到各个商店页面：

<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>

和我的控制员：

'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;
        });


    };
}]);

我做错了什么？似乎无法解决这个问题。

Answer 1

代码中出现太多错误。我将指出两个主要内容：您甚至没有定义商店详细信息的路线，并且您没有启用 HTML5路由模式，因此您的链接不会没有'＃'的工作。最好从一些工作示例开始：https://docs.angularjs.org/api/ngRoute/service/$route#example

还有下一次，请告诉我们到底出了什么问题和你想要完成什么。错误日志和在线工作代码示例（例如Plunker或JSBin）也很有帮助。

路由提供商混淆

1 个答案: