angular指令的transclude学习
最近学习angular,今天将指令中的
<body ng-app="transcludeApp"> <div ng-controller="trascludeCtrl"> <my-dialog> my dialog contents,{{ name }} </my-dialog> </div> <script src="angular.js"></script> <script src="transclude.js"></script> </body> 我们在页面中使用了自定义指令
angular.module('transcludeApp',[]) .controller('trascludeCtrl',['$scope',function($scope) { $scope.name = 'Tobias'; }]) .directive('myDialog',function() { return { restrict: 'E',transclude: true,scope: {},templateUrl: 'my-dialog.html',link: function(scope) { scope.name = 'Jeff'; } }; });
<div class="alert"> directive template,{{ name }} <hr> <div ng-transclude>ng-transclude,{{ name }}</div> </div> 我们查看一下运行结果:
可以看到指令中的内容填充到了指令模板中
<body ng-app="transcludeApp"> <div ng-controller="trascludeCtrl"> <my-dialog></my-dialog> </div> <script src="angular.js"></script> <script src="transclude.js"></script> </body>
接下来,我们来看一下有多个嵌入点的情况,这时指令中的
<body ng-app="transcludeApp"> <div ng-controller="trascludeCtrl"> <my-dialog> my dialog content,{{ name }} <transclude-header>transclude header content,{{ name }}</transclude-header> <transclude-body>transclude body content,{{ name }}</transclude-body> <!-- <transclude-footer>transclude footer content,{{ name }}</transclude-footer> --> my dialog content footer,{{ name }} </my-dialog> </div> <script src="angular.js"></script> <script src="transclude.js"></script> </body>
angular.module('transcludeApp',transclude: { 'header': 'transcludeHeader','body': 'transcludeBody','footer': '?transcludeFooter',},link: function(scope) { scope.name = 'Jeff'; } }; });
<div class="alert"> directive template,{{ name }}</div> <hr> <div ng-transclude="header">ng-transclude-header,{{ name }}</div> <div ng-transclude="body">ng-transclude-body,{{ name }}</div> <div ng-transclude="footer">ng-transclude-footer,{{ name }}</div> </div>
我们的transclude对象定义了如何将多个嵌入点与指令内部的指令嵌入点一一对应,拿 参考文章:angular指令的transclude选项以及ng-transclude指令 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |