我创建了一个类似于这样的模板的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