如何在AngularJS中向ui-view传递参数？项目场景咨询

Hey there! Let's tackle your two AngularJS questions one by one:

Since ui-view is part of AngularUI Router, here are the most common and reliable ways to pass parameters to it:

• Using URL parameters with $stateParams (the standard approach)
  First, define your state with a parameter in the URL in your AngularJS route config:

  angular.module('yourApp')
    .config(function($stateProvider) {
      $stateProvider
        .state('targetState', {
          url: '/your-path/:paramName', // Use `?paramName` for optional query params
          templateUrl: 'path/to/your/template.html',
          controller: 'TargetController'
        });
    });
  

  Then inject $stateParams into your controller to access the parameter:

  angular.module('yourApp')
    .controller('TargetController', function($stateParams) {
      const receivedParam = $stateParams.paramName;
      // Use the parameter in your logic
    });
  

• Using resolve to pass prepared data/parameters
  If you need to fetch or process data before the controller loads, use the resolve property in your state definition. This lets you inject the resolved value directly into the controller:

  angular.module('yourApp')
    .config(function($stateProvider) {
      $stateProvider
        .state('resolvedState', {
          url: '/resolved-path',
          templateUrl: 'path/to/template.html',
          controller: 'ResolvedController',
          resolve: {
            customParam: function() {
              // You can also fetch data from an API here
              return 'prepped-value-for-controller';
            }
          }
        });
    });
  

  Use it in the controller like this:

  angular.module('yourApp')
    .controller('ResolvedController', function(customParam) {
      console.log(customParam); // Outputs 'prepped-value-for-controller'
    });
  

• Passing parameters between nested states
  For nested ui-views, parent state parameters are automatically accessible via $stateParams in child controllers. You can also pass data when navigating with $state.go:

  // In a parent controller or navigation trigger
  $state.go('parent.child', { childParam: 'nested-value' });
  

  Access it in the child controller via $stateParams.childParam.

Since the token is passed to your server-rendered reset.mustache template, you need to bridge this server-side value to your AngularJS app. Here are three solid approaches:

• Inject the token as an Angular constant (most clean)
  In your reset.mustache file, add a script tag that defines a constant in your Angular module using the server-rendered token:

  <!-- Inside reset.mustache -->
  <script>
    angular.module('yourApp').constant('RESET_TOKEN', '{{token}}');
  </script>
  

  Then inject this constant into your reset.html's controller to use the token:

  angular.module('yourApp')
    .controller('ResetController', function(RESET_TOKEN) {
      const resetToken = RESET_TOKEN;
      // Use the token for password reset logic
    });
  

• Use ng-init to pass the token to the scope
  Add an ng-init directive to the ui-view element in reset.mustache to set the token on the parent scope:

  <!-- Inside reset.mustache -->
  <div id="wrap" ui-view class="mainview" ng-init="resetToken='{{token}}'"></div>
  

  Access it in your ResetController (note: adjust for isolated scopes if needed):

  angular.module('yourApp')
    .controller('ResetController', function($scope) {
      const resetToken = $scope.resetToken;
      // For isolated scopes: use $scope.$parent.resetToken
    });
  

• Store the token in a meta tag
  Add a meta tag to the <head> of reset.mustache, then read it in your Angular controller:

  <!-- Inside reset.mustache's <head> -->
  <meta name="reset-token" content="{{token}}">
  

  Fetch it in the controller:

  angular.module('yourApp')
    .controller('ResetController', function() {
      const resetToken = document.querySelector('meta[name="reset-token"]').content;
      // Use the token here
    });
  

内容的提问来源于stack exchange，提问作者devRena