List 如何创建一个多用途部分；模板"；在AngularJS？

我有一大堆物品。每个项目都有自己的详细信息

在我的主视图/局部视图中，我只是显示一个项目名称的大列表。 当用户单击某个项目时，我希望页面转到一个部分，该部分用作“模板”，显示基于单击哪个列表项目的信息，以及可能的URL外观。例如，

/listItem1/

下面这张图很有希望总结出我想要达到的目标。

我该怎么做

现在，我有一个非常标准的设置，其中我拥有对象文本数组中每个列表项的所有信息，该数组包含在注入主应用程序模块的控制器中。像这样：

    var app = angular.module('app', [/*nodependencies*/]);

    var controllers = {};

    app.controller(controllers);

    controllers.listController = function ($scope){ 
    $scope.list = [
            {name: 'List Item 1 Name',  detail1: 'blahblah1', detail2: 'blahblah2'},
{name: 'List Item 2 Name', detail1: 'blahblah1', detail2: 'blahblah2'},
{name: 'List Item 3 Name', detail1: 'blahblah1', detail2: 'blahblah2'}  
        ..... and so on

---

我也知道如何创建基本视图/分区。但我接下来的步骤是什么

使用AngularJS附带的内置路由器，您可以随心所欲

var app = angular.module('app', [/*nodependencies*/])

    .config(function($routeProvider) {
        $routeProvider
            .when('/:itemId', {
                templateUrl: '/path/to/partial',
                controller : function($scope, $routeParams) {
                    $scope.item = $routeParams.itemId;
                }
            })
    });

基本上，上面的意思是，如果你浏览到pdf/item/1

然后，您可以在控制器中访问$routeParams.itemId，该值等于1。然后，您可以对零件上的这些信息执行任何必要的逻辑操作，以显示所需的信息

希望这有帮助

更新

---

请查看控制器，这是如何获得通过URL传递的参数，然后在控制器中对该参数执行任何需要执行的操作，并将数据传递回视图。

您可以创建一个小指令，该指令将使用multi-use partial来显示列表中的每个项目

看看这个工作示例（）

---

啊。顺便说一下，对象文本中的“url”属性实际上只是对象的一个细节，而不是我想要的路径。所以我猜我会写

。当（':itemId'，{…}

？那么我将如何在部分模板中指定以显示特定列表项的详细信息？啊，我明白了。因此，如果我使用

ng repeat

生成所有列表项，

$routeParams

是否允许我访问单击的特定列表项的属性？那么我将编写

$routeParams.itemId.detail1

或者，

$routeParams.detail1

如果我想显示这些详细信息？$routeParams映射到URL上使用冒号运算符的任何内容。例如，如果使用/：itemId，则URL为/1，则$routeParams.itemId将==1谢谢。这样做成功了，我最终使用了多个路由参数，例如

/category/：categoryId/list/：listId

。有兴趣阅读本文的读者请看这里：在我的$scope中，我实际上有多个数组列表，为了确定使用获取的

：itemID

参数搜索哪个数组列表，我使用了传递到第一个$routeParam中的内容，

：categoryID

，以及一个相当大且笨拙的de>if/else ifblock。这可能不是最好的方法，但没有足够的技能来解决其他问题。很高兴你找到了解决方案，很高兴编码：）这看起来很棒。我将对此进行详细研究，然后再与您联系。您能否快速为我解释指令范围内的

项：'='

部分？我刚刚意识到我把

范围{}

放在那里了。我在做一些其他的测试，通过指令上的属性传递项内容——这就是scope要做的。上面的代码没有使用它，你可以删除它。啊。。因此，如果这个范围是不必要的，那么代码中是否有因此也不必要的部分？像按钮中的

name=“{{item.name}}”

是必需的吗？另外，为什么attribute指令名为

listItem

，而我在index.html中看到的最后一个

的属性名为

listItem

？i、 e.

？还混淆了

iAttrs

参数。对不起，我还在学AngularJS。我想我理解它的一般流程，但是你能帮我解释一下你的代码吗？哦！我收回。有必要：基本上，作用域

{item:'='}

在本地作用域（指令）属性和名称的父作用域属性（控制器）之间建立双向绑定，该属性是通过attr属性

item

（$scope.selected）的值定义的。

 var myApp = angular.module('myApp', []);

  myApp.controller('listController', ['$scope', function ($scope) {

    $scope.list = [
            {
              name: 'List Item 1 Name',  
              url: 'pdfs/item1.pdf', 
              detail: 'blahblah'
            },

      {
        name: 'List Item 2 Name',  
        url: 'pdfs/item2.pdf', 
        detail: 'blahblah'
      },

      {
        name: 'List Item 3 Name',  
        url: 'pdfs/item3.pdf', 
        detail: 'blahblah'
      }
    ];

    $scope.selectItem = function(item){

      $scope.selected = item;

     }

 }]);

  myApp.directive('listItem', [function () {
    return {
      restrict: 'A',
       scope: {
        item: '='
      },
      templateUrl: 'multiple-partial.html',
      link: function (scope, element, iAttrs) {


      }
    };
  }])