ng-bind-html 和 ng-controller答案

【问题标题】：ng-bind-html and ng-controllerng-bind-html 和 ng-controller
【发布时间】：2015-12-27 05:34:16
【问题描述】：

我将不安全的 html 注入到一些 <div> 中，如下所示：

<div class="category-wrapper" ng-bind-html="content"></div>

这个 html 有 angularjs “代码”（$scope.content 加载了类似的东西）：

<script type='text/javascript' src='giveus.js'></script>
<div class="giveus-wrapper" ng-controller="GiveUsController">{{variable1}}</div>

请注意，这个 sn-p 有ng-controller。 GiveUsController 在嵌入 html 的同时被延迟加载（不在 head 中）。声明此控制器没有错误，因为它已经过测试。

我的控制器很简单：

angular.module("tf").controller('GiveUsController', function ($scope, $http)    
{
     console.debug("GiveUsController loaded");
     $scope.variable1 = "hi!";
}

没有控制台调试也没有variable1分配

似乎没有控制器绑定到该<div>。

我不知道如何使用 Angular 控制器注入 html 并使其工作...

有什么想法吗？

【问题讨论】：

Angular 被引导一次，所以如果您在引导后尝试添加组件，尽管我不确定如何重新加载它们（如果可以的话），这可能无法正常工作。
为了获得更好的答案，我建议您在 StackOverflow 或 Plunker/JSFiddle 的代码编辑器中创建一个测试
@ExplosionPills 注意到，您的问题可能与 angularJs 引导有关。您可以手动引导，在此处查看更多信息：docs.angularjs.org/api/ng/function/angular.bootstrap

标签： javascript html angularjs angularjs-directive ng-bind-html

【解决方案1】：

您可以通过一些手动 html 编译来做您想做的事情。这是一种本质上是$compile service 的指令包装器的方法。观察下面的例子和用法...

 <div class="category-wrapper" ng-html="content"></div>

.controller('ctrl', function($scope) {
    $scope.content = '<div class="giveus-wrapper" ng-controller="GiveUsController">{{variable1}}</div>'
})
.controller('GiveUsController', function($scope) {

    console.log('hello from GiveUsController')
    $scope.variable1 = 'I am variable 1'
})
.directive('ngHtml', ['$compile', function ($compile) {
    return function (scope, elem, attrs) {
        if (attrs.ngHtml) {
            elem.html(scope.$eval(attrs.ngHtml));
            $compile(elem.contents())(scope);
        }
        scope.$watch(attrs.ngHtml, function (newValue, oldValue) {
            if (newValue && newValue !== oldValue) {
                elem.html(newValue);
                $compile(elem.contents())(scope);
            }
        });
    };
}]);

JSFiddle Link - 演示

【讨论】：

@MrVision 我已经编辑了我的答案以更接近您的问题。你能检查一下，看看这是否适合你？我怀疑您正在加载 JavaScript。您可以将其包含在您的页面上而不是在此动态调用中吗？
非常感谢！这对我来说是解决方案！只有一件事：我必须替换 elem.html(newValue);对于 elem.html(newValue.toString());一切顺利！谢谢！

【解决方案2】：

你必须编译 HTML 内容，我使用指令得到这个：

.directive('comunBindHtml', ['$compile', function ($compile) {
        return function(scope, element, attrs) {
          scope.$watch(
            function(scope) {
              // watch the 'compile' expression for changes
              return scope.$eval(attrs.compile);
            },
            function(value) {
              // when the 'compile' 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);
            }
        );
      };
    }])

希望对你有帮助:)

【讨论】：

仅供参考，这与我后来发布的答案基本相同
我尝试了你们给我的所有解决方案（谢谢！），但没有成功。我要把这个问题写进一些小提琴......并编辑我的帖子
我不记得从哪里来的，但是这个答案是从另一个堆栈帖子中复制的。您应该链接源而不是复制它们。

【解决方案3】：

Angular 本身不会绑定添加到 DOM 中的 ng 指令。

$sce.compile 或 $compile 帮助 Angular 读取哪些元素被添加到实际 DOM 中，同样要使用 $compile 你必须使用指令。

应该是这样的：

var m = angular.module(...);

m.directive('directiveName', function factory(injectables) {
  return = {
    priority: 0,
    template: '<div></div>', // or // function(tElement, tAttrs) { ... },
    transclude: false,
    restrict: 'A',
    templateNamespace: 'html',
    scope: false,
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    controllerAs: 'stringIdentifier',
    bindToController: false,
    require: 'siblingDirectiveName', 'optionalDirectiveName', '?^optionalParent'],
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
    },

  };
});

你想要的地方

$compileProvider.directive('compile', function($compile) {
      return function(scope, element, attrs) {
        scope.$watch(
          function(scope) {
            return scope.$eval(attrs.compile);
          },
          function(value) {
            element.html(value);
            $compile(element.contents())(scope);
          }
        );
      };

【讨论】：