-4

嗨，我收到了一个 HTML 响应，其中嵌入了完整的 Angular 代码，我已经尝试了 ng-bind-html 和 ng-html-compile 进行渲染。它都不起作用。HTML 元素正在正确呈现，但 ng 指令都不起作用。有人可以帮忙解决这个问题吗？

在我的控制器内部，我将 http 响应数据（html）分配给 rootscope 变量（$rootScope.htmlResponse=data）。

这是 html 编译的指令

.directive('ngHtmlCompile', function($compile) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue) {
            element.html(newValue);
            $compile(element.contents())(scope);
        });
    }
};
})

搜索结果.html：

<ion-view  ng-swipe-left="scanClick()">
<ion-nav-buttons side="left">
    <button class="button button-icon button-dark ion-navicon" menu-toggle="left" style="margin-left:-10px;margin-right:-20px" id="lhm_button">
    </button>

</ion-nav-buttons>
<ion-nav-title>
    Product Detail
</ion-nav-title>
<ion-nav-buttons side="right">
    <button class="button button-icon button-dark ion-search" ng-click="searchIconClick()" style="margin-top:4px;background:#8eb4e3;line-height:5px"></button>
</ion-nav-buttons>
<ion-content>

<div>
    <p **ng-html-compile="htmlResponse"**></p>
</div>
</ion-content>

</ion-view>

这是我得到的 http 响应示例：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
<title>TEST</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js">    </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-animate.min.js"></script> 
 </head>
 <body ng-app="myapp">
 <div ng-controller="myController">
  {{name.myname}}
 </div>

 <script>
 var app = angular.module('myapp', []);
 app.controller('myController', function ($scope) {
 $scope.name={};
 $scope.name.myname = "stack";
 });

 </script> 
 </body>
 </html>

将显示以下结果：

 {{name.myname}}
4

2 回答 2

1

尝试使用 iframe....

<iframe width="100%" height="500px" ng-attr-srcdoc="{{htmlResponse}}"></iframe>
于 2015-04-28T05:46:29.873 回答
-2

拿这个示例代码试试这个代码

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <title>TEST</title>
    <script src="angular.js"></script> 
 </head>
 <body ng-app="myapp">
 <div ng-controller="myController">
   {{name}}
 <mydir rootdata="htmlresponse"></mydir>
 </div>

 <script>
 var app = angular.module('myapp', []);
 app.controller('myController', function ($scope,$rootScope) {
  $scope.name = "stack";
  $rootScope.htmlresponse = "I am root scope";
 });
 app.directive("mydir", function () {
  return {
          restrict : 'E',
          scope    : {
                         da : "=rootdata";
                     }
          template : "<div>Hello I am Directive {{da}}</div>"
         }
 });

 </script> 
</body>
</html>
于 2015-04-21T11:30:11.510 回答