<body ng-controller="MyController as vm"> <h1 ng-bind="vm.title"></h1> <h2>指令one-transclude 内部含有元素</h2> <!-- 指令one-transclude 内部含有元素--> <one-transclude> <div>$AAAAAA $我是指令[one-transclude]元素内部的内容</div> </one-transclude> <h2>指令one-transclude 内部不含有元素</h2> <!-- 指令one-transclude 内部不含有元素 --> <one-transclude></one-transclude> <h2>指令mutil-transclude</h2> <!-- 指令mutil-transclude --> <multi-transclude> <multi-transclude-title>我是指令元素内部的title</multi-transclude-title> <multi-transclude-body>我是指令元素内部的body</multi-transclude-body> <multi-transclude-footer>我是指令元素内部的footer</multi-transclude-footer> </multi-transclude> </body>
2、app.js
(function() { angular.module('app', []) .controller('MyController', myController) .directive('oneTransclude', oneTransclude) .directive('multiTransclude', multiTransclude); myController.$inject = []; function myController() { var vm = this; vm.title = 'ng-transclude'; } function oneTransclude() { return { restrict: 'AE', transclude: true, templateUrl: 'one-transclude.html' }; } function multiTransclude() { return { restrict: 'AE', transclude: { 'title': 'multiTranscludeTitle', 'body': 'multiTranscludeBody', 'footer': '?multiTranscludeFooter' }, templateUrl: 'multi-transclude.html' }; } })();
3、one-transclude.html
<div> <div> $BBBBBB$ 我是指令[one-transclude]模板的内容 </div> <hr> <ng-transclude> $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的内容 </ng-transclude> </div>
4、multi-transclude.html
<div> <div ng-transclude="title"></div> <div>忽略我,我就是证明我是在模板中的1</div> <div ng-transclude="body"></div> <div>忽略我,我就是证明我是在模板中的2</div> <div ng-transclude="footer"></div> </div>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: