-4

Hi I am receiving an HTML response with full angular code embedded in it and I have tried both ng-bind-html and ng-html-compile for rendering. Neither of it works.The HTML elements are getting rendered properly but none of the ng directives are working. Can anyone please help on this issue?

Inside my controller i am assigning the http response data(html) into a rootscope variable ($rootScope.htmlResponse=data).

this is directive for html compile

.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);
        });
    }
};
})

searchResults.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>

Here is the sample of the http response i am getting:

<!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>

The following result is getting displayed:

 {{name.myname}}
sudarshan
  • 85
  • 1
  • 1
  • 6
  • 4
    Posting some code might help! `ng-app` is in HTML as well? – Sandeep Nayak Apr 21 '15 at 10:33
  • yes ng-app, ng-controller ,ng-if everything inside html – sudarshan Apr 21 '15 at 10:37
  • haaaaaa.. @SandeepNayak mean: Please show your code in your question. – Ramesh Rajendran Apr 21 '15 at 10:46
  • You may want to manually bootstrap your Angular code to work. Take a look at this: https://docs.angularjs.org/guide/bootstrap (Scroll down to Manual Initialization) – Sandeep Nayak Apr 21 '15 at 10:54
  • Please can you post as much of your code as possible to your question so that we can help you with an answer – Grant Apr 21 '15 at 10:55
  • @RameshRajendran sorry,, i am not supposed to share the response,, ;) – sudarshan Apr 21 '15 at 11:17
  • 1
    You have removed everything that you say isn't working. Please make a **complete** example which you have confirmed that it actually replicates the problem. You don't have to use your actual code. Otherwise this is impossible to answer. – JJJ Apr 21 '15 at 11:18

2 Answers2

1

Try using iframe....

<iframe width="100%" height="500px" ng-attr-srcdoc="{{htmlResponse}}"></iframe>
sakthi
  • 74
  • 1
  • 7
-2

Take this Example code try this code 

<!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>
Arepalli Praveenkumar
  • 1,247
  • 1
  • 13
  • 27