如何预设ui.router $ stateParam

时间:2014-06-16 10:12:55

标签: javascript angularjs routing

我有一个带有两个或多个视图和链接的仪表板来加载这些视图,在视图上你可以选择一个客户,一旦设置了客户选择链接去查看两个应该带customerId来显示相关内容为客户。

使用$ state.go添加链接并设置$ stateParams var工作正常,但$ sate链接位于父模板和控制器中。

通过$ state链接将customerId值(一旦选中)分配给状态的最佳方法是什么,即用户选择客户,然后选择链接以查看2以查看客户的联系人。

我已经创建了一个用于演示的插件。

http://plnkr.co/edit/F4QWxkdmMGun8uccvX8t

1 个答案:

答案 0 :(得分:0)

指数HTML     

控制台

<ul>
  <li><a ui-sref="view1">Customer Search/Select (View 1)</a></li>
  //here is the change
  <li><a ng-click="go()">Customer Contacts (View 2)</a></li>

</ul>

---添加服务以在控制器之间共享对象---

.

service("selectedCustomer",function(){
  var selected={};
  return {

    select:function(customerId){
      selected.customerId=customerId;
    },

    get:function(){
      return selected;
    }
  }});

-------这是仪表板控制器----------

    var DashboardController = function($scope,$state,selectedCustomer){
    $scope.go = function() {
      console.log(selectedCustomer.get().customerId);
        $state.go('view2', {customerId: selectedCustomer.get().customerId});
    };
};

-------这是ViewOneController ----------

var ViewOneController = function($scope, $state, $stateParams,selectedCustomer){
  $scope.customers = [
    {"id": 21, "name": "Customer #21"},
    {"id": 22, "name": "Customer #22"},
    {"id": 23, "name": "Customer #23"},
    {"id": 24, "name": "Customer #24"},
    {"id": 25, "name": "Customer #25"}
    ];

    $scope.update=function(){
      selectedCustomer.select($scope.customerId);
    }


};