调用 trustAsHtml Angularjs 后将新的 html 绑定到控制器答案

【问题标题】：Bind new html to controller after calling trustAsHtml Angularjs调用 trustAsHtml Angularjs 后将新的 html 绑定到控制器
【发布时间】：2014-03-22 02:27:52
【问题描述】：

一旦从服务器接收到新的 html，我就可以嵌入它，但稍后我需要将它绑定到模型。即使我在插入并显示 5 秒后编译它，html 也不会绑定到模型。

让我简单举例说明

function coolController($scope, $http, $log, $sce, $compile, $timeout){
$scope.message = {
        error: 'Kernel panic! :)',
        otherInfo: ''
    }

    $scope.form = $sce.trustAsHtml('<div></div>');

    $scope.Init = function(){
        $http({
            method: 'GET',
            url: helper.url('/form')
        }).
        success(function(data, status, headers, config) {
            $scope.form = $sce.trustAsHtml(data);
            $timeout(function(){
            $compile(angular.element('#elemThatContainsTheNewHTML'))($scope);
            }, 2500);

        }).
        error(function(data, status, headers, config) {
            $scope.message.error = data;            
        });
    }
}

假设 html 是

<div>
My cool error: {{ message.error }}
</div>

它的嵌入位置应该是这样的：

<div ng-controller="coolController">
    <h4>Hello???</h4>

    <div ng-init="Init()">
      <span class="alert-error" ng-if="errorMessage.length > 0">{{errorMessage}}</span>
    </div>

    <div id="elemThatContainsTheNewHTML" class="viewContent" ng-bind-html="form">
    </div>
</div>

html 已正确嵌入，但我想将其绑定到模型。

【问题讨论】：

angular.element 不支持选择器 => angular.element('#elemThatContainsTheNewHTML') 无效。您可以为此尝试 jQuery，或者只在页面上包含 jQuery。

标签： angularjs angularjs-scope ng-bind-html

【解决方案1】：

看看this related question的答案，里面描述了使用指令编译模板：

这有点棘手，因为 ng-bind-html 将简单地插入普通的旧 html 而无需费心编译它（因此 html 中的任何指令都不会被 angular 处理。

这是一个demo，将建议的技术与您的代码结合起来。

【讨论】：

【解决方案2】：

我遇到了同样的问题，我制作了 angular 指令，它将重新呈现 html 内容。指令代码如下。

指令：

app.directive('bindUnsafeHtml', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
            console.log("in directive");
          scope.$watch(
            function(scope) {
              // watch the 'bindUnsafeHtml' expression for changes
              return scope.$eval(attrs.bindUnsafeHtml);
            },
            function(value) {
              // when the 'bindUnsafeHtml' expression changes
              // assign it into the current DOM
              element.html(value);

              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
            }
        );
    };

}]);

HTML：

<div bind-unsafe-html="form">//your scope data variable which wil assign inn controller
</div>

不要忘记在您配置 angularJs 项目的位置导入指令。希望这会对您有所帮助。

【讨论】：