Question

我创建了一个带有类似于此模板的角度指令：

<div>
  <header class='header'></header>
  <div class='subheader'>
    <div ng-bind-html='subheaderTemplate'></div>
  </div>
  <div class='content' ng-transclude></div>
</div>

此指令将始终在具有控制器的父div中使用。指令的每次使用都将从父控制器传入不同的HTML片段作为subheaderTemplate。某些实例需要此HTML代码段才能使用父容器中的控制器。但是测试一下，子标题模板似乎根本不知道父控制器。

以下是该指令的典型用法：

<div ng-controller="MyController as mc">
  <my-directive subheader-template="mc.subheaderTemplate">
    <div class="content">Content</div>
  </my-directive>
</div>

我是否误解了ng-bind-html中的某些行为？

Answer 1

我想我明白你的目标是什么，我认为我是根据Angular文档中的例子让它在这个plunker中工作的。所以它应该工作。如果此示例无法解决您的问题，也许您可以提供更多代码。

＆＃13;

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
       $scope.header = '<h1>I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em></h1>';
  }])
  .directive('test', function() {
      return {
        restrict: 'E',
        template: "<div><header class='header'></header><div class='subheader'><div ng-bind-html='subheaderTemplate'></div></div><div class='content' ng-transclude></div></div>", 
        scope: {
          subheaderTemplate: '='
        },
        transclude: true
      }
  });
  
  
  
})(window.angular);

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example62-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-sanitize.js"></script>
  <script src="script.js"></script>
  
</head>
<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
 <test subheader-template="header">
   <h3>subheader</h3>
 </test>
</div>
</body>
</html>

＆＃13;

Plunkr

将父元素的控制器携带到HTML模板中，该模板通过ng-bind-html插入到指令的模板中

1 个答案: