ng-bind-htmlの角1.4の解析内容

Question

私は何をしていますか？

簡潔には私は$ scope.myDataというオブジェクトの配列と$ scope.layoutという文字列を持っています。私がしたいことは、ng-repeat="x in myData"とまたng-bind-html="layout"のスパンを持つことです。レイアウトはいくつかの点で{{ x.key }}です。レイアウトをロードし、配列内の各オブジェクトの表示を開始し、変数を入力します。

具体的には、私はデータとレイアウトをAJAX（jQueryを使用）でロードしています。私はこのことがまったく問題なのかどうかはわかりません。

これまでのコードは？

$scope.layout変数に私のHTMLをunsanitizeするには、angular-sanitize.jsが含まれています。また、app=angular.module()宣言にngSanitizeを追加しました。

AJAXの下では、その部分が動作するので、実際にはif(status=='success'){}内のものを読み取る必要があります。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('a.doit').click(function(e){ 
     e.preventDefault(); 

     $.ajax({ 
      method:'POST', 
      data:{'ajax':true}, 
      url:'<?=URL('--url to load from--')?>' 
     }).always(function(data,status){ 
      if(status=='success'){ 
       var getelementby='[ng-app="myApp"]'; 
       window.data=data; 
       angular.element(document.querySelector(getelementby)).scope().$apply(function($scope){ 
        $scope.layout=window.data.layout; 
        $scope.myData=window.data.data; 
       }); 
      }else{ 
       console.log('Error :('); 
      } 
     }); 
    }); 
}); 

var app=angular.module('myApp',['ngSanitize']); 

app.controller('myCtrl',function($scope,$http){$scope.myData={};}); 
</script> 

<a href="#" class="doit btn btn-default">Load</a> 

<div ng-app="myApp" ng-controller="myCtrl"> 
    <span ng-repeat="x in myData"><span ng-bind-html="layout"></span></span> 
</div> 

（私は私のエラーチェックは、これまでの粗である知っている）

それは何をしますか？レイアウトに正しい時間が表示されますが、式は{{ x.key }}ではありません。

私は間違っていますか？私はすでに私のHTMLをunsanitizingしています。これはちょうど角度が働く方法ではありませんか？それを行う別の方法がありますか？

Answer 1

ng-bind-htmlで角度テンプレートを読み込まないでください。これに代えて

：

// someDirective.js 
angular.module('my.module').directive('myTemplate', function() { 
    return { 
    template: '{{ x }}' 
    }; 
}); 

そして、あなたの元のテンプレートにそのディレクティブを使用します：

<some-directive /> 

Answer 2

必要に何

// controller 
$scope.templ = '{{ x }}'; 

// template 
<div ng-bind-html="templ"></div> 

移動し、独自のディレクティブのテンプレートコントローラー内の関数を使用して、jQueryを使用して同じことを実行してください。 ここで動作するはずのコードです。

app.controller('myCtrl',['$scope', '$http', function($scope,$http){ 

    $scope.myData={}; 

$scope.getAjaxData = function(){ 

    $http({ 
     method: 'POST', 
     data:{'ajax':true}, 
     url: '/someUrl' 
    }).then(function successCallback(response) { 

      $scope.myData = response.data; 

     }, function errorCallback(response) { 

      console.log('error'); 
     }); 

    } 

}]); 

次に、あなたのHTMLに次のようなものを使用してデータを表示しよう...

<a ng-click="getAjaxData()" class="doit btn btn-default">Load</a> 
<span ng-repeat="x in myData"> 
    <p ng-bind="x.key"></p> 
    <p ng-bind="x.value"></p> 
</span> 

これはただ荒い例です。それを試して、それが動作するかどうかを確認します。

ありがとう、 Paras