如何在angularjs中将参数传递给控制器​​？

Question

我目前正在使用平均堆栈编写一个简单的论坛网站。我正处于显示给定主题内容的位置。为此，我使用ng模型，以便用户输入主题的名称，然后查询我的mongodb。问题是刷新后用户必须再次输入名称才能获得所需内容。我如何编码以便用户选择主题并显示正确的内容？

Answer 1

如果要在刷新后保留数据，则应使用angular-ui-router（https://github.com/angular-ui/ui-router）将参数作为参数集成到URL中。

.state('topics', {
    url: '/topics/:search',
    templateUrl: 'html',
    controller: 'Controller'
  })

然后在控制器内部获得带有$ stateParams的参数：

var search = $stateParams.search;

这应该给你一个良好的开端，希望它有帮助=）

Answer 2

我会让你填写你需要的空白（或者你可以提出进一步的问题），但是这里有一些来自Angular方面的基本代码来命中一个端点并检索一些数据并将其显示在一个图。

如Gustavo的回答所述，您需要UI Router。

应用 - 此处的配置将允许您刷新页面，并且仍然可以保留您想要的主题。

angular.module('app', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider.state('topics', {
      url: '/topics/:topic',
      templateUrl: 'path_to_template.html',
      controller: 'myController'
    });
  });

服务 - 这将与您的API通信，该API将为您获取数据。

angular.module('app')
  .service('myService', function($http) {
    this.getInfo = function(topic) {
      return $http.get('path_to_api', { params: { topic: topic } });
    };
  });

控制器 - 这会将您的模板与示波器绑定，从而可以显示结果。

angular.module('app')
  .controller('myController', function($scope, $stateParams, myService) {
    activate();

    function activate() {
      myService.getInfo($stateParams.topic)
        .then(function(result) {
          $scope.topicInfo = result;
        });
    }
  });

希望这会有所帮助 - 很乐意回答您的任何其他问题。