2015-04-22 4 views
0

Я новичок в angularjs. В моем проекте я получаю HTML-файл в качестве ответа HTTP. ng-bind-html работает с html-кодом. Но код angularjs внутри html не компилируется. Я пробовал решения с компиляцией $, ничего не работает. Пожалуйста, предложите хорошее решение для этого.

Допустим, у нас есть пример кода, как это:

<!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"> 
    <p compile="htmlresponse"></p> 
    </div> 

<script> 
var app = angular.module('myapp', []); 
app.controller('myController', function ($rootScope,$sce) { 
    $http.get(,,,,).success(function(data){ 
    $rootScope.htmlResponse=$sce.trustAsHtml(data); 
    } 
}); 

app.directive('compile', function($compile) { 
    // directive factory creates a link function 
    return function(scope, element, attrs) { 
    scope.$watch(
     function(scope) { 
     return scope.$eval(attrs.compile); 
     }, 
     function(htmlResponse) { 
     element.html(htmlResponse); 
     $compile(element.contents())(scope); 
     } 
    ); 
    }; 
}); 

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

Это отлично работает, если я получаю только HTML, как ответ. Когда я получаю HTML с angularjs (который включает app.module, app.controller, app.directives), обрабатывается только часть html. Пожалуйста, помогите мне в этом вопросе.

Вот мой образец ответа.

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

Что вы подразумеваете под словом «он не компилируется»? Выполнен ли встроенный JavaScript? Вы не являетесь событием, использующим 'ng-bind-html' внутри образца кода, который вы предоставили. Из вопроса (как сейчас) мне непонятно, чего вы пытаетесь достичь. – Martin

+0

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

+0

Вы ответ HTML должны быть фрагментом html. HTML и BODY являются специальными тегами, если они неуместны, они удаляются браузером. Также 'ng-app' может запускаться только один раз. После того, как Angular будет инициализирован, любое другое ng-приложение будет проигнорировано. То, что вы возвращаете, похоже, должно быть помещено в iframe, хотя это означает, что он не сможет общаться с другим приложением на странице. – Enzey

ответ

2

Я попытался с IFRAME ,, и он работает ,,, :) Либо мы должны сохранить ответа в HTML-файл и использовать его как это ,,,,,,,

<iframe src="htmlResponse.html"> </iframe> 

Или мы можем напрямую назначить ему переменную корнеплода.

<iframe width="100%" height="500px" ng-attr-srcdoc="{{htmlResponse}}"></iframe> 
0

Если вам нужно отобразить необработанный содержимое HTML для просмотра страницы с AngularJS, вы можете воспользоваться услугой ScE $, которая поставляется с AngularJS. $ sce означает строгое контекстное экранирование. У службы есть метод trustAsHTML с использованием некоторого произвольного текста или HTML.

см это: http://learnwebtutorials.com/using-angularjs-sce-trustashtml-raw-html

Кроме этого: How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

+0

Я пробовал $ sce.trustAsHtml, вы можете видеть это в моем вопросе. – sakthi

+0

Вы видели это сообщение . Может быть, это может вам помочь – Reena

+0

Я уже это пробовал. Не помогло :( – sakthi

1

Вы должны попробовать использовать ту же версию angularjs и ngsanitize, которая решила ту же проблему для меня!