ng-bind-html 和 ng-controller

Question

我正在向一些 <div> 注入不安全的 html，像这样：

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

这个 html 有 angularjs "code"（$scope.content 加载了这样的东西）：

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

请注意，此代码段有 ng-controller。 GiveUsController 在嵌入 html 的同时延迟加载（不在头部）。声明此控制器没有错误，因为它已经过测试。

我的控制器很简单：

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

没有控制台调试，也没有 variable1 赋值

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

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

有什么想法吗？

Answer 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 - 演示

Answer 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);
            }
        );
      };
    }])

希望对您有所帮助:)

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

ng-bind-html 和 ng-controller

ng-bind-html and ng-controller

html

javascript

angularjs

angularjs-directive

ng-bind-html