標籤：配置 dir angularjs clu gui pretty ati restrict []
Transclude是一個配置, 為了告訴AngularJs去擷取當前指令模版內部的所有內容(實際使用ng-transclude), 更多關於怎麼建立一個包含其他元素的指令: documentation of directives
下面自訂一個指令用ng-transclude在指令模版中去指定你想插入的內容:
angular.module(‘app‘, []) .directive(‘hero‘, function () { return { restrict: ‘E‘, transclude: true, scope: { name:‘@‘ }, template: ‘<div>‘ + ‘<div>{{name}}</div><br>‘ + ‘<div ng-transclude></div>‘ + ‘</div>‘ }; });代碼使用如下:
<hero name="superman">Stuff inside the custom directive</hero>頁面顯示如下:
Superman
Stuff inside the custom directive
完整的例子:
Index.html
<body ng-app="myApp"> <div class="AAA"> <hero name="superman">Stuff inside the custom directive</hero></div></body>jscript.js
angular.module(‘myApp‘, []).directive(‘hero‘, function () { return { restrict: ‘E‘, transclude: true, scope: { name:‘@‘ }, template: ‘<div>‘ + ‘<div>{{name}}</div><br>‘ + ‘<div ng-transclude></div>‘ + ‘</div>‘ }; });頁面:
實現:
AngularJs 中的transclude的理解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
