Question

我对Angular相当新，我想知道如何使用Angular路线创建列表/详细信息视图，因为我现在看起来并没有起作用。

该应用有一个＆＃39;项目列表＆＃39;当您点击项目时，您会看到所选项目的详细视图，标准内容。我使用ng-switch工作了这一点，但理想情况下我想对列表/详细信息视图使用单独的路由。我已经读过，因为我需要使用factory方法，但我在路由之间传递所选数据时遇到了困难。这就是我所拥有的：

app.factory('Project', [ function ($rootScope) {
    var _selectedProject = {};
    _selectedProject.project = {};
    return _selectedProject;
}]);

app.controller('GalleryController', ['$scope', function ($scope, _selectedProject) {

    $scope.sharedProject = _selectedProject || {};

    $scope.selectProject = function (proj) {
        _selectedProject.project = proj;
    };

    $scope.$watch('sharedProject', function (proj) {
        $scope.chosenProject = proj;
    })


}]);

我实际上无法设置属性＆＃39; property＆＃39;未定义的，在$scope.selectedProject内。

Answer 1

一个很好的解决方案是ui-router。

ui-router允许嵌套与控制器，网址和html模板相对应的状态。

在您的示例中，我将执行以下操作：

安装ui-router（在上面的链接中描述）

按如下方式应用配置：

myApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('project', {
      url: "/project",
      templateUrl: "partials/project/list.html",
      controller: project_list_controller
    })
    .state('project.details', {
      url: "/details",
      templateUrl: "partials/project/details.html",
      controller: project_detail_controller
    })
}

将当前控制器拆分为项目列表控制器和项目详细信息控制器。
最后，我会使用服务将您的selectedProject存储为单身人士，在这个有用的blog post

希望这有帮助。

Answer 2

您将工厂命名为Project，但正在使用_selectedProject作为控制器的注入。您也没有将它包含在注入数组中

控制器看起来应该更像：

app.controller('GalleryController', ['$scope','Project', function ($scope, Project) {

    $scope.sharedProject = Project || {};

    $scope.selectProject = function (proj) {
        Project.project = proj;
    };

    $scope.$watch('sharedProject', function (proj) {
        $scope.chosenProject = proj;
    });

}]);

角度列表/详细信息视图

2 个答案: