données de portée de liaison angulaire à templateCache

Question

je cette fonction dans mon contrôleur, qui charge dans un modèle

$http.get('scripts/routes/template.html', { cache : $templateCache}) 
    .then(function(val){ 
     var returnedTemplate = val.data; // returns string 
     $scope.name = 'blah blah'; 
     $scope.message = 'Good day'; 
    }); 

Le modèle que ce qu 'il chargé dans par val.data, est une chaîne

<h3 class="md-title">{{name}}</h3> 
<p class="md-title">{{message}}</p> 

Comment puis-je obtenir la chaîne renvoyée par le modèle chargé et lier les variables vars à la chaîne?

Le résultat est que je dois

<h3 class="md-title">blah blah</h3> 
<p class="md-title">Good day</p> 

J'ai essayé d'utiliser les fonctions de compiler $ pour lier les données à la chaîne, mais en vain.

Merci à l'avance pour l'aide

Answer 1

vous devez compiler manuellement le code HTML après la liaison. créer une directive comme celle-ci.

.directive('dynamic', function ($compile) { 
    return { 
    restrict: 'A', 
    replace: true, 
    link: function (scope, ele, attrs) { 
     scope.$watch(attrs.dynamic, function(html) { 
     ele.html(html); 
     $compile(ele.contents())(scope); 
     }); 
    } 
    }; 
}); 

puis appelez cela dans le code html et lier la chaîne HTML à la directive

<div dynamic="returnedTemplate"></div> 

Contrôleur

$scope.name = 'blah blah'; 
$scope.message = 'Good day'; 
$scope.returnedTemplate = '<h3 class="md-title">{{name}}</h3><p class="md-title">{{message}}</p>' 

Démo

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
     $scope.name = 'blah blah'; 
 
     $scope.message = 'Good day'; 
 
$scope.returnedTemplate = '<h3 class="md-title">{{name}}</h3><p class="md-title">{{message}}</p>' 
 
}).directive('dynamic', function ($compile) { 
 
    return { 
 
    restrict: 'A', 
 
    replace: true, 
 
    link: function (scope, ele, attrs) { 
 
     scope.$watch(attrs.dynamic, function(html) { 
 
     ele.html(html); 
 
     $compile(ele.contents())(scope); 
 
     }); 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<div dynamic="returnedTemplate"></div> 
 
</div>

Answer 2

Merci, vous m'avez indiqué dans la bonne direction, c'est la solution qui fonctionne le mieux pour mon installation.

angular.module("app",[]) 
 
.controller("ctrl",function($scope, $compile, $timeout){ 
 
     $scope.name = 'blah blah'; 
 
     $scope.message = 'Good day'; 
 
     var returnedTemplate = '<div><h3 class="md-title">{{name}}</h3><p class="md-title">{{message}}</p></div>'; 
 
     var element = $compile(returnedTemplate)($scope); 
 

 
     $timeout(function() { 
 
      var confirmDialogMessage = element.html(); // needed time 
 
      console.log(confirmDialogMessage); // here I got the html with values in, but still in a string 
 

 
     }, 300); 
 
     
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"></div>