Question

我正在使用 UI Router Tabs 进行导航/路由。有三个选项卡[用户，地址和服务]。单个标签有自己的状态，网址，控制器和模板。

如何将用户标签[ UserCtrl.js ]中的请求参数（保存的对象ID，名字和姓氏）传递给 AddressCtrl.js 和 ServiceCtrl.js 。

我如何实现这一目标？

到目前为止我做了什么？

app.js

'use strict';

var app = angular.module('xyzApp', [ 'ui.router','ngResource', 'ui.bootstrap', 'ui.router.tabs']);

app

    .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', '$interpolateProvider', '$locationProvider',
            function($stateProvider, $urlRouterProvider, $httpProvider, $interpolateProvider, $locationProvider) {

        // CSRF Support
        $httpProvider.defaults.xsrfCookieName = 'csrftoken';
        $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';

        $urlRouterProvider.otherwise('/');

        $stateProvider

            .state('new', {
              url:         '/',
              controller: 'MainCtrl',
              templateUrl: 'partials/base.html'
            })
            .state('new.user', {
              url:         '/new/user',
              controller: 'UserCtrl',
              templateUrl: 'partials/user-tab.html'
            })
            .state('new.address', {
              url:         '/new/address',
              controller: 'AddressCtrl',
              templateUrl: 'partials/address-tab.html'
            })
            .state('new.service', {
              url:         '/new/service',
              controller: 'ServiceCtrl',
              templateUrl: 'partials/service-tab.html',

            })
    }]);

MainCtrl.js

'use strict';
app
    .controller('MainCtrl', ['$scope', function($scope) {


        // Inititalise the new personnel page tabs
        $scope.initialise = function() {
            $scope.go = function(state) {
              $state.go(state);
            };

            $scope.personneltabinfo   = [
              {
                heading: 'User',
                route:   'new.user',
                //params:  {
                //  userId: $scope.userId
                //},
              },
              {
                heading: 'Address',
                route:   'new.address',

              },
              {
                heading: 'Service',
                route:   'new.service'
              }
            ];
        };


        $scope.initialise();


}]);

UserCtrl.js

'use strict';
app
    .controller('UserCtrl', ['$scope', '$rootScope',  '$http', '$compile', '$timeout', 'userServices', 
      function($scope, $rootScope, $http, $compile, $timeout,  userServices) {


        $scope.userId = '';

        $scope.savePerson = function() {

          console.log("This is userData:" + $scope.userData);
          // user resource service
          userServices.addUser($scope.userData)
            .then(function(data) {
        // pass $scope.userId to [Account and Service] routes view.
        // pass firstname and secondname value  to [Account and Service] routes view so it’s value can be shown on their panel-title.
                      $scope.userId = data.id; 
              toastr.success('Personnel ' + $scope.baseData.first_name + ' record saved into database');
          }, function(data, status, headers, config) {
                toastr.error('Field Error:' + " Please fill all fields mark  with * ");
            });
        };

}]);

我是有角度的初学者！

Answer 1

如果我理解您的问题，您希望将数据从控制器传递到另一个控制器。

您可以查看：Passing data between controllers in Angular JS?

您可以使用：

服务：https://docs.angularjs.org/guide/services，
$ rootScope 但这不是最佳解决方案，
或组件之间的绑定数据：https://docs.angularjs.org/guide/component

如何使用UI路由器选项卡将params传递到目标路由

1 个答案: