-4

こんにちは、完全な角度コードが埋め込まれた HTML 応答を受信して​​おり、レンダリングのために 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);
        });
    }
};
})

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

2 に答える 2

-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 に答える