ng-transclude

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script src="js/angular/angular.min.js"></script>
 8     </head>
 9 
10     <body>
11         <div ng-app="testapp" ng-controller="parentController">
12             <button-bar>
13                 <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
14                 <button class="primary">Primary2</button>
15             </button-bar>
16         </div>
17         <script>
18             var testapp = angular.module('testapp', []);
19             testapp.controller('parentController', ['$scope', '$window', function($scope, $window) {
20                 console.log('parentController scope id = ', $scope.$id);
21                 $scope.primary1Label = 'Prime1';
22 
23                 $scope.onPrimary1Click = function() {
24                     $window.alert('Primary1 clicked');
25                 };
26             }]);
27             
28             testapp.directive('buttonBar', function() {
29                 return {
30                     restrict: 'EA',
31                     template: '<div class="span4 well clearfix"><div class="pull-right" ng-transclude></div></div>',
32                     replace: true,
33                     transclude: true
34                 };
35             });
36         </script>
37     </body>
38 
39 </html>
ng-transclude