Question

我正在将不安全的html注入某些<div class="category-wrapper" ng-bind-html="content"></div>，如下所示：

$scope.content

这个html有angularjs“代码”（<script type='text/javascript' src='giveus.js'></script> <div class="giveus-wrapper" ng-controller="GiveUsController">{{variable1}}</div>加载了这样的东西）：

ng-controller

请注意，此代码段包含angular.module("tf").controller('GiveUsController', function ($scope, $http) { console.debug("GiveUsController loaded"); $scope.variable1 = "hi!"; }。 GiveUsController是在嵌入式html（不在头部）的同时延迟加载的。声明此控制器没有错误，因为它已经过测试。

我的控制器非常简单：

variable1

没有控制台调试也没有<div>分配

看起来没有控制器绑定到{{1}}。

我不知道如何使用角度控制器注入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

Angular本身不绑定添加到DOM中的ng-directive。

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

Answer 3

你必须编译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);
            }
        );
      };
    }])

希望有所帮助：）

ng-bind-html和ng-controller

3 个答案: