javascript - 在没有 url 帮助的情况下在 Controller 之间传递数据?

标签 javascript angularjs angularjs-directive angular-ui-router angular-routing

我正在使用 AngularJS 创建两页 Web 应用程序。 我的 Json 文件是:

{
    "data": [

        { "name": "bhav",
"id": 123
            },
{"name": "bhavi",
"id": 1234
},
{"name": "bhavk",
"id": 1235
}
]
}

我的app.js(路由文件是):

myApp = angular.module('myApp', ['slickCarousel',
  'ngRoute',
  'myAppControllers',
    'myAppServices','swipeLi'
]);

myApp.config(['$routeProvider',
  function($routeProvider) {

    $routeProvider.
      when('/', {
        templateUrl: 'partials/home-page.html',
        controller: 'ProfileListCtrl',
    }).
    when('/profile/:typeofprofile', {
        templateUrl: 'partials/profile-detail.html',
        controller: 'ProfileDetailCtrl'
      })
}]);

我的第一页(home-page.html)采用给定的格式:

<div ng-repeat="data in data">
<a href="profile/myfriend">{{data.name}}</a>
</div>

第二页(profile-details.html) 考虑到我正在使用 http.get 请求从 Controller 中的 Json 文件中提取数据,我想要该配置文件的 id 号

所以请帮我获取点击的个人资料的 ID 或名称,而不通过 URL 。

注意:我已经查看了 ui-route 链接:Angular ui router passing data between states without URL但我没明白。

最佳答案

正如您在评论中所述,您希望使用 $state.go() 来传递数据。使用 $state.go() 来传递 params 也非常简单。您需要在应用程序中注入(inject)ui.router。我创建了 2 个部分 View 来显示参数的传递,其中 paramsheader.html 传递到 side.html

你的JS将如下所示:

var app = angular.module('nested', ['ui.router']);
app.config(function($stateProvider,$locationProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider.state('top', {
      url: "",
      templateUrl: "header.html",
      controller: 'topCtrl'
    })
    .state('top.side', {
      url: '/app/:obj/:name',
      templateUrl: "side.html",
      controller: 'filterCtrl'
    })
});

app.controller('topCtrl', function($scope,$state) {
          $scope.goItem = function(){
            $state.go('top.side',{obj:441,name:'alex'});
          };
      });


app.controller('filterCtrl', function($scope,$state) {
  console.log(JSON.stringify($state.params));
  $scope.params = $state.params;
      });

这是工作PLUNKER,您可以在其中找到有关 View Controller 脚本所需的操作:

http://plnkr.co/edit/M1QEYrmNcwTeFd6FtC4t?p=preview

我提供了使用 ui-sref$state.go() 传递 $stateParams 的方法。但是,如果您想在所有 Controller 之间共享数据。请参阅我在这个问题中的回答:
Share Data in AngularJs

关于javascript - 在没有 url 帮助的情况下在 Controller 之间传递数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36058005/

相关文章:

javascript - 为什么使用 ng-repeat 时图表会附加到现有的 div 中?

javascript - 在模块中使用 Facebook JS SDK (webpack)

javascript - 将前几天的大日历风格 react 到当前日期

javascript - 默认参数函数

javascript - 使用 Angular 有条件地隐藏 Bootstrap 工具提示内的文本内容

javascript - Angular 自定义指令在 promise 解析后未设置值

javascript - 如何画两个边相交的圆?

javascript - RESTful API 未显示在简单的 AngularJS Controller 中

javascript - 注入(inject) Controller 和模拟 AngularJS 服务

javascript - Angularjs错误未知提供者