var app = angular.module("phoneApp", []); app.controller("AppCtrl", function($scope) { }); app.directive("panel", function() { return { restrict: "E", transclude: true, template: '<div class="panel" ng-transclude>This is a panel component</div>' } })
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Angular Scope &</title> <link href="foundation.min.css" rel="stylesheet"/> <script src="angular.min.js"></script> <script src="app.js"></script> </head> <body > <div ng-app="phoneApp"> <div ng-controller="AppCtrl"> <panel> <div class="button">Click me!</div> </panel> </div> </div> </body> </html>