Question

我正在尝试执行以下操作：

当用户访问“localhost/people/:id”时，有关相关人员的信息将从MongoDB中获取并通过Angular显示。

我有我的api，它完全正常，我已经仔细检查了。

我正在使用最新的AngularJS（1.4.9）和新的路由器（angular-new-router或ngNewRouter）。

我有一个Angular模块：

var personModule = angular.module('app.personDetailed', []);

工厂：

personModule.factory('personService', ['$http', function($http) {
  return {
    get : function(id) {
      return $http.get('/api/people/' + id);
    }  
  }  
}]);

和控制器：

personModule.controller('PersonDetailedController', ['$routeParams', '$scope', 'personService', PersonDetailedController]);

function PersonDetailedController($routeParams, $scope, personService) {

  var id = $routeParams.id;

  personService.get(id).then(function(res) {   
    $scope.item = res.data;  
  });
}

这一切都应该显示在这个视图中：

<div data-ng-controller="PersonDetailedController">
  <h2>{{ item }}</h2>
</div>

（是的，我现在还没有打算解析json）。

问题是，我无法同时使用$scope和$routeParams。我只能拥有其中一个。如果我同时使用它们，$scope工作正常，但$routeParams为空。

这是主控制器，以防万一：

var appModule = angular.module('app', ['app.main', 'app.personDetailed', 'ngNewRouter', 'ngResource']);

appModule.controller('AppController', ['$router', AppController]);

function AppController($router) {     
  $router.config([
   { path: '/', component: 'main'}
   { path: '/people/:id', component: 'personDetailed'}
  ]);
}

Answer 1

似乎新路由器不再使用this，而是绑定到模板中的控制器实例。

您似乎应该使用personModule.controller('PersonDetailedController', ['$routeParams', 'personService', PersonDetailedController]); function PersonDetailedController($routeParams, personService) { var personDetailed = this, id = $routeParams.id; personService.get(id).then(function(res) { personDetailed.item = res.data; }); }

ng-controller

和您的观点（不要使用<h2>{{ personDetailed.item }}</h2>）

 cd "C:\Users\First Last\"

将AngularJS与工厂和控制器一起使用

1 个答案: