Question

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

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

我相信我需要包装我的jQuery，它正在为'指令'中的数据刮掉dom，但不知道该怎么做。让这个jQuery坐在控制器中感觉不对。

也许我甚至不需要jQuery来获取这些数据.. Angular可以这样做吗？

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：http://plnkr.co/edit/kUqL9f?p=info

Answer 1

我在这里制作了一个带有指令的新Plunk： http://plnkr.co/edit/Q9FLIyWSzfm77SbvyBys?p=info

基本上，您需要添加：

angularApp.directive('domScrapper', 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-scrapper 添加到您设置控制器的元素上。

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

我在你的控制器中添加了一个console.log，告诉你指令和控制器共享相同的范围，因为我不知道你想对数据做什么。

在index.html中，我还切换了jquery和angular。 Angular使用轻量版的jQuery，除非你需要一个jQuery库之前角度库。既然你需要jQuery，最好先把它放在上面。你可以在那里： https://groups.google.com/forum/#!topic/angular/6A3Skwm59Z4

希望它有所帮助。

如何在Angular.js中编写一个指令来刮取数据

1 个答案: