角度绑定范围数据到 templateCache答案

【问题标题】：angular bind scope data to templateCache角度绑定范围数据到 templateCache
【发布时间】：2017-04-09 22:13:15
【问题描述】：

我的控制器中有这个函数，它在模板中加载

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

val.data 加载的模板是一个字符串

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

如何获取从加载的模板返回的字符串并将范围变量绑定到字符串？

我需要的结果是

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

我尝试使用 $compile 函数将数据绑定到字符串，但无济于事。

提前感谢您的帮助

【问题讨论】：

标签： javascript angularjs dynamic angular-templatecache

【解决方案1】：

绑定后需要手动编译html。创建这样的指令。

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

然后在 html 中调用 this 并将 html 字符串绑定到指令

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

控制器

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

演示

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>

【讨论】：

谢谢你，你绝对指出了我的写作方向。在玩了很多之后，我想到了这个。

【解决方案2】：

谢谢，您为我指明了正确的方向，这是最适合我的设置的解决方案。

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>

【讨论】：