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-click =“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后，需要重新编译它以完全呈现html DOM

将此指令添加到querySelector元素作为属性。这将重新编译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);
                });
            }
        };
    }]);

如何通过angularjs注入html代码

1 个答案: