Question

我是AngularJS的新手

我们通过REST API公开我们的数据

/shop/2/mum

这个url返回JSON并像这样绑定它们

function ec2controller($scope, $http){
  $http.get("/shop/2/mum")
           .success(function(data){
                $scope.shopname = data.name;
                $scope.location = data.location;
                $scope.customer = data.customer;
    })

在html中

<div class="shop">
  <ul class="list-group">
    <li class="list-group-item">
     <span class="shop-box">{{showname}}</span>
    </li>
    <li class="list-group-item">
     <span class="shop-box">{{location}]}</span>
    </li>
   </ul>
  </div>

这很好用！

现在，我们需要一个像

这样的动态网址

/shop/<user-id>/<location>

当我从下拉框中选择一个选项时，我需要传递此网址，在 {{shopname}} ， {{location}} 中设置值因此。怎么做请指导我？

感谢

Answer 1

在你的app.js中你会定义一系列ui-router知道的路由。这些路线可以有动态部分。在您的情况下，您需要执行以下操作：

$stateProvider.state('shop', {
    url:"shop",
    abstract: true,
    views: {
        "body": {
            templateUrl: "partials/shop.jade",
            controller: "ShopController"
        }
    }
})
.state('shop.customer', {
    url: "/:customer",
    views: {
        "body": {
            templateUrl: "partials/shop.customer.jade",
            controller: "ShopCustomerController"
        }
    }
})
.state('shop.customer.location', {
    url: "/:location",
    views: {
        "body": {
            templateUrl: "partials/shop.customer.location.jade",
            controller: "ShopCustomerLocationController"
        }
    }
})

请注意，这假定/shop设置为abstract，这意味着它不是可解析的路由，如果您希望/shop/2也无法解析，则应遵循相同的标准。

然后在例如ShopCustomerLocationController中，您可以使用以下命令访问url参数：

$state.params.location; // would return "mum"
$state.params.customer; // would return "2" <-- note string not integer

AngularJS：如何绑定动态网址中的数据？

1 个答案: