将现有数据从DOM读入模型，ng模型中的静态数据？

Question

我目前正在使用Angular重写现有页面的功能。它的要点是我有一个简单的HTML页面，其中包含一些东西，如：

<ul>
  <li class="item">
    <h1>Foo</h1>
    <ul class="categories">
      <li class="category">Bar</li>
    </ul>
  </li>
  ...
</ul>

这可以通过一些Javascript进行扩充，该Javascript一次解析此数据并向页面添加动态类别过滤器菜单。即它会提取所有li.category元素并显示一个菜单，然后单击其中一个类别会过滤项目列表，以仅显示具有所选类别的项目。

我在Angular中复制了基础知识，代码比以前少得多。但是，我仍在进行大量jQuery遍历.item元素以构建最初的类别列表：

myApp.controller('MyController', function ($scope) {
    $scope.categories = [];

    angular.element('.item').each(function () {
        angular.element(this).find('.categories .category').each(function () {
            var category = this.textContent;
            for (var i = 0, length = $scope.categories.length; i < length; i++) {
                if ($scope.categories[i].name == category) {
                    $scope.categories[i].count++;
                    $scope.categories[i].items.push(this);
                    return;
                }
            }
            $scope.categories.push({ name : category, count : 1, items : [this] });
        });
    });
});

这似乎不符合Angular的精神，我想用以下内容替换它：

<ul>
  <li class="item" ng-item>
    <h1>Foo</h1>
    <ul class="categories">
      <li class="category" ng-category>Bar</li>
    </ul>
  </li>
  ...
</ul>

然后，指令应该能够解析所有ng-item / ng-category元素，并将它们添加到模型/范围中一次。像ng-model这样的东西，但是对于静态数据。

我几乎没有Angular的经验，我怎么能做到这一点;或者我不应该首先想做一些完全不同的事情？

Answer 1

要创建自己的ng-item和ng-category指令，我建议您可以通过Creating Custom Directives参与Angular Offical Develop Guide：

http://docs.angularjs.org/guide/directive

它将告诉您如何从add指令开始创建指令，如下所示：

.directive('myCustomer', function() {
    return {
      template: 'Name: {{customer.name}} Address: {{customer.address}}'
    };
});

编辑：

这两个也是有用的教程：

1. http://www.ng-newsletter.com/posts/directives.html
2. http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/

EDIT2：

回答你的评论：

Do you have a concrete sample of how I'd write a directive that reads data from its element and modifies the controller's scope? 

我认为它在Angular官方指南中有明确的解释：

  .directive('myCustomer', function() {
      return {
          restrict: 'E',
          scope: {
              customerInfo: '=info'
          },
          templateUrl: 'my-customer-iso.html'
      };
  });

在这个例子中：

restrict：'E'：指令名称匹配元素名称

所以指令看起来像这样：

  <my-customer></my-customer>

范围：{customerInfo：'= info'}

  <my-customer info="myInfo"></my-customer>

这会将myInfo绑定到范围，就像这个表达式一样：

  $scope.customerInfo = myInfo;

这是如何从其元素中读取数据并修改控制器范围的具体示例。