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



我创建了一个类似于这样的模板的angular指令:

<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或其他东西的一些行为?

我想我明白你的意思了,我想我已经根据Angular文档中的例子在这个plunker中工作了。所以应该行得通。如果这个例子不能解决你的问题,也许你可以提供更多的代码。

(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);
<!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>

Plunkr

最新更新