2015-04-21 1 views
-4

Привет, Я получаю ответ HTML с полным встроенным в него угловым кодом, и я попытался выполнить как ng-bind-html, так и ng-html-compile для рендеринга. Ни одно из них не работает. Элементы HTML обрабатываются правильно, но ни одна из директив ng не работает. Кто-нибудь может помочь в решении этой проблемы?ng-controller не работает внутри html

Внутри моего контроллера я назначаю данные ответа HTTP (html) в переменную корневого индекса ($ 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); 
     }); 
    } 
}; 
}) 

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> 

Вот пример ответа 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

Публикация какой-то код может помочь! 'ng-app' также находится в HTML? –

+0

yes ng-app, ng-controller, ng-if все внутри html – sudarshan

+0

haaaaaa .. @SandeepNayak mean: Пожалуйста, покажите свой код в своем вопросе. –

ответ

1

Попробуйте использовать IFRAME ....

<iframe width="100%" height="500px" ng-attr-srcdoc="{{htmlResponse}}"></iframe> 
-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> 
+0

Вы даже прочитали вопрос? –

+0

Человек, который задал этот вопрос, не знает о синтаксисе. Я дал небольшой фрагмент кода –

+0

синтаксис не проблема ... элементы html получают визуализированный должным образом, но угловые компоненты не получают привязанные Я использовал как ng-html- компиляции и ng-bind-html, но это напрасно – sudarshan