如何通过angularjs注入html代码

Question

嗨我想注入html代码到表中它工作良好，但问题是有一些功能不会解雇，当我点击他们我不知道为什么，任何一个可以帮助?? 继承人的功能：

storyboard.getTmeLineTopDataKm= function (deviceId) { 

     var url = servername+'api/position/timeLineTopKm/'+deviceId; 

     console.log("Inside getMaxChaufeeurId " + url); 


     function onSuccess(response) { 
      console.log("+++++getMaxChaufeeurId SUCCESS++++++"); 

      if (response.data.success != false) { 
       //alert(JSON.stringify(response.data)); 
       $scope.km=response.data.km; 
       $scope.km2=response.data.km; 
       //alert(deviceId); 
          var elm=angular.element(document.querySelector('#ysf_'+deviceId)); 
          elm.append('<div style="margin-top:0px;margin-left:10px;"">'      
          +'<i ng-click="storyboard.getLastDayTimeLine()" style="cursor: pointer;padding-right:23px" class="fa fa-arrow-left " aria-hidden="true"></i>{{currentDatee}}' 
          +'<i style=" cursor: pointer;padding-left:23px" ng-click="storyboard.getForwardDayTimeLine()" class="fa fa-arrow-right " aria-hidden="true"></i> <br/> '      
          +'<i class="fa fa-road" aria-hidden="true" >'+ $scope.km2 +'Km'+'</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' 
          +'<i class="fa fa-tachometer" aria-hidden="true">' + $scope.speed2 +'km/h'+'</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' 
          +'<i class="fa fa-clock-o" style="color:green" aria-hidden="true"> 01:17</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' 
          +'<i class="fa fa-clock-o" style="color:red" style="padding:150px" aria-hidden="true"> 00:19</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' 
          +'<i class="fa fa-clock-o" style="color:orange" style="padding-right:160px" aria-hidden="true"> 02:51</i>' 

          +'</div>' 
          + '<div style="margin-top:7px;margin-left:10px;position:relative;" id="visualization2_'+deviceId+'"></div>' 
          ); 

      // alert($scope.km2); 






      //$scope.MyData=response.data; 
      } 
     }; 

     function onError(response) { 
      console.log("-------getMaxChaufeeurId FAILED-------"); 

      console.log(response.data); 
      console.log("Inside getMaxChaufeeurId error condition..."); 
     }; 

     //----MAKE AJAX REQUEST CALL to GET DATA---- 
     ajaxServicess.getData(url, 'GET', '').then(onSuccess, onError); 

    }; 

对于为例此功能NG点击= “storyboard.getLastDayTimeLine（）” 不能正常工作。

<table width="100%"> 
         <thead style="background-color: lightgray;"> 
         <tr> 
          <td style="width: 30px;"></td> 
          <td><p>Name</p></td> 
         <td><p>ID</p></td> 
         <td><p>GPS date</p></td> 
         <td><p>Adresse</p></td> 
         <td><p>Company</p></td> 
         </tr> 
         </thead> 
         <tbody> 
         <tr ng-repeat-start="device in MyDeviceObject"> 
          <td> 
          <button ng-if="device.expanded" ng-click="device.expanded = false">-</button> 
          <button ng-click="storyboard.getSelectedRow(device);device.expanded = true" ng-if="!device.expanded" >+</button> 
          </td> 
          <td><p>{{device.name}}</p></td> 
          <td><p>{{device.uniqueid}}</p></td> 
          <td><p>{{device.devicetime}}</p></td> 
          <td><p>{{device.adress}}</p></td> 
          <td><p>{{device.company}}</p></td> 
         </tr> 
         <tr ng-if="device.expanded" ng-repeat-end=""> 
          <td></td> 
          <td colspan="5" id="ysf_{{device.id}}" > 

          </div> 

          </td> 
         </tr> 
         </tbody> 
        </table> 

Answer 1

一旦你从JS，你需要重新编译以充分呈现HTML DOM

这个指令添加到您的querySelector元素属性绑定HTML。这将重新编译DOM

.directive('bindHtmlCompile', ['$compile', function ($compile) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attrs) { 
       scope.$watch(function() { 
        return scope.$eval(attrs.bindHtmlCompile); 
       }, function (value) { 
        element.html(value); 
        $compile(element.contents())(scope); 
       }); 
      } 
     }; 
    }]);