Angular 1.4 Parse Inhalt von ng-bind-html

Question

Was mache ich?

Kurz: Ich habe ein Array von Objekten namens $ scope.myData und eine Zeichenfolge namens $ scope.layout. Was ich machen möchte, ist eine Spanne mit ng-repeat="x in myData" und auch ng-bind-html="layout". Layout hat {{ x.key }} an mehreren Stellen. Ich möchte, dass es das Layout lädt und dann für jedes Objekt im Array anzeigt, und fülle die Variablen aus.

Genauer gesagt: Ich lade die Daten und das Layout über AJAX (mit jQuery). Ich bin mir nicht sicher, ob das überhaupt wichtig ist, da alles andere gut funktioniert.

Welchen Code habe ich bisher?

Ich schließe angular-sanitize.js ein, um mein HTML in der $scope.layout Variable zu unanitisieren. Ich fügte auch ngSanitize zur app=angular.module() Erklärung hinzu.

Unter den AJAX Sachen, müssen Sie wirklich nur die Sachen innerhalb if(status=='success'){} lesen, da dieser Teil funktioniert.

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

(ich weiß, dass meine Fehlerprüfung so weit Rohöl)

Was ist zu tun? Es zeigt das Layout die richtige Anzahl von Malen, aber es füllt nicht die {{ x.key }} Ausdrücke.

Was könnte ich falsch machen? Ich bin gerade dabei, meinen HTML-Code zu entfernen. Funktioniert das nicht gerade? Gibt es einen anderen Weg, es zu tun?

Answer 1

Sie sollten keine angulare Vorlage über ng-bind-html laden.

Statt dessen:

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

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

Verschieben Sie die Vorlage eine eigene Richtlinie:

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

Und diese Richtlinie in Ihrer ursprünglichen Vorlage verwenden:

<some-directive /> 

Answer 2

Was Sie brauchen Verwenden Sie die Funktion im Controller, um dasselbe zu tun, was Sie mit jQuery versuchen. Hier ist ein Code, der funktionieren sollte. mit so etwas wie die folgenden ...

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

Dies ist nur ein grobes Beispiel

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

    } 

}]); 

Dann in Ihrem HTML versuchen, die Daten anzuzeigen. Probieren Sie es aus und sehen Sie, ob es funktioniert.

Danke, Paras