时间戳

首页 > 解决方案 > Passing parameters from input bar

angularjs - Passing parameters from input bar

问题描述

I want to create an input bar where I can submit zip code that I later use to find pizzerias that deliver to that zip code. Queries aside, I have a problem with sending the zipCode. Any suggestions?

home.html

    <div class="bar">
        <form ng-submit=submit() ng-controller="zipCodeController">
            <p><b>Wpisz kod pocztowy np. 30-069</b></p>
            <input type="text" ng-model="text" name="text"/>
        </form>
    </div>

main.js

app.controller('zipCodeController', ['$scope', $location, function($scope, $location) {
$scope.zipCode = '';
$scope.text = 'Wpisz adres pocztowy np. 30-069';
$scope.submit = function () {
    if ($scope.text) {
        $scope.zipCode.push(this.text);
        $scope.text = '';
    }
    $location.path('/pizzeriaList/'+$scope.text);
}

app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
    .when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
    // Pages
    .when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"})
    .when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"})
    .when("/pizzeriaList", {templateUrl: "partials/pizzeriaList.html", controller: "PageCtr"})
    .when("/p/:id", {templateUrl: "partials/pizzeria.html", controller: "PageCtrl"})
    .when("/p/:id/:pid", {templateUrl: "partials/addPizza.html", controller: "PageCtrl"})
    .when("/cart", {templateUrl: "/partials/cart.html", controller: "PageCtrl"})
    .when("/pizzeriaList/:zipCode", {templateUrl: "/partials/pizzeriaList.html", controller: "PizzeriaListCtrl"})
    .otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});


app.controller('PizzeriaListCtrl', function($scope){
    $scope.zipCode = $routeProvider.zipCode;
})

标签： angularjs

解决方案

这就是服务的用途，它们可以注入到需要共享数据的每个组件中。

app.service('zipCodeService', function() { return { zipCodes:[] }; });

将其添加到组件中的依赖项列表中

app.controller('zipCodeController', ['$scope', '$location', 'zipCodeService', function($scope, $location, zipCodeService)

现在将邮政编码添加到服务而不是您的范围

zipCodeService.zipCodes.push(this.text);

您想从注入服务访问该数组的任何其他组件，它是该数组的同一个实例。

推荐阅读