AngularJS DOM 操作使用现有指令

Question

我正在尝试通过更改控制器的范围变量来学习添加 DOM 元素的 Angular 方法，该元素从服务返回的数据传递给指令。

我的服务

.factory('Poller', function($http,$q){
           return {
                poll : function(api){
                    var deferred = $q.defer();
                    $http.get(api).then(function (response) {
                            deferred.resolve(response.data);
                    });
                    return deferred.promise;
                }

            }
        });

我的控制器

.controller('accordion',['$scope','Poller','$timeout',function($scope,Poller,$timeout){
$scope.newdata = null;

function Repeater ()  {
     $scope.$apply(function () {
     Poller.poll('api/getupdates')
       .then(function(data){
           $scope.newdata = data;                                   
            });
        });
     };
    $timeout(Repeater, 1000) ;             
    var timer = setInterval(Repeater, 11000);  

我的指令

.directive( 'newreading', function () {
  return {
    scope: {'newdata' : '='},
    templateURL : 'template\newreading.html',
    link: function ( scope, element, attrs ) {
      var el;

      scope.$watch('newdata', function () {

          console.log(scope.newdata);

      });
    }
  };
}); 

HTML //注意：这是由 ng-repeat 完成的

 <accordion-group id="Device 1">  
     <newreading ></newreading> 
 </accordion-group> 

 <accordion-group id="Device 2">  
     <newreading ></newreading> 
 </accordion-group>      

 <accordion-group id="Device3">  
     <newreading ></newreading> 
 </accordion-group>      

 <accordion-group id="Device4">  
     <newreading ></newreading> 
 </accordion-group> 

我的 JSON 示例

{
    "readings": [                    
            "id": "Device2",
            "T01": "3",
            "L02": "35"
    ]
}

这里一切正常，我想完全不使用 jQuery（我知道 Angular 有 jQuery Lite）

我的问题

首先，这是使用 Angular JS 向 DOM 添加元素的正确方法吗？如果是，我将如何重用该指令？目前，scope.watch 会触发该函数 4 次（显然！！）。

我太困惑了，因为我找不到一种简单的方法来触发正确的指令来添加元素。

我浏览了文档的几个部分，发现 StackOverflow 问题建议编译和添加元素，我可以这样做，但我需要在所需的 div 中添加元素。

非常感谢任何帮助。

Answer 1

在你的指令定义中，你写了scope: {'newdata' : '='}。这将创建一个隔离范围，其中$scope.newdata 双向绑定到newreading 元素的属性newdata。

因此，如果您的 HTML 没有显示 <newreading newdata="someVariableOnTheScope"></newreading>，这没有任何意义。我不知道你的accordion 控制器的作用范围是什么，所以我不能给你更具体的建议。

由于您使用的是相同的模板，因此您似乎不需要针对新读数的额外指令。您只想显示额外的读数。因此，您应该更新底层模型，您的视图将自行更新。这就是 Angular 的魔力。

可以按如下方式添加额外读数（假设newData 包含新读数）：

// create an object so you can lookup a device by id
var devicesById = _.indexBy($scope.data,'_id');
_.each(newData,function(device) {
  // add the new readings to the readings of the device with the correct id
  Array.prototype.push.apply(devicesById[device._id].readings,device.readings);
});

一个笨蛋：http://plnkr.co/edit/iKtmrToz4fkJ46bVfcjX

一些额外的提示：

• 如果您不需要访问attrs 或element，请不要在链接函数中编写代码。在指令的控制器中执行此操作
• 如果您在 AngularJS 范围之外做事，您只需将代码包装在 $scope.$apply 中。你基本上是在对 Angular 说：我在这里做的事情可能已经改变了你所知道的 DOM，再次同步。这在同时使用其他库（例如 JQuery）时非常有用