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>
