Javascript 如何在Angular.js中编写一个指令来获取dom中的数据

我是Angular.js noob，在一个小问题上需要帮助。我工作的CMS没有服务&不会输出JSON。我唯一的选择是从dom获取数据。我知道这并不理想，在一个完美的世界里，事情会有所不同，但事实并非如此

我在页面上有一个用CSS隐藏的div，里面有类.people数据，这是一个无序列表。这是我的服务：）

我相信我可能需要将我的jQuery封装在一个“指令”中，这个jQuery正在删除dom中的数据，但我不知道怎么做。将这个jQuery放在控制器中感觉不好

也许我甚至不需要jQuery来获取这些数据。。我能做这样的事吗

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

angularApp.controller('PeopleCtrl', ['$scope', function PeopleCtrl($scope) {

$scope.people = [];

    // don't want this in controller.. scraping dom for data
    // a directive?? how and where does it go?
    $('.people-data li').each(function(){
      $scope.people.push({ 
          name: $(this).find('.name').text(), 
          email: $(this).find('.email').text() 
      });
    });

} ]);

---

这是Plunk:

我在这里用指令创建了一个新的Plunk：

基本上，您需要添加：

angularApp.directive('domScraper', function() {
  return {
    restrict: "A",
    link: function(scope, element, attr) {
      scope.people = [];
      $('.people-data li').each(function() {
        scope.people.push({
          name: $(this).find('.name').text(),
          email: $(this).find('.email').text()
        });
      });
    }
  }
});

然后，只需将属性dom scraper添加到设置控制器的元素中

<div ng-app="angularApp" ng-controller="PeopleCtrl" dom-scraper>

我在您的控制器中添加了一个console.log，以向您显示指令和控制器共享相同的作用域，因为我不知道您想对数据做什么

在您的index.html中，我还切换了jquery和angular。Angular使用jQuery的轻型版本，除非您需要在Angular库之前使用jQuery库。因为您需要jQuery，所以最好将其放在前面。 你可以在那里了解它：

希望能有帮助