2014-02-28-fff-directive-transclude

<!DOCTYPE html>
<html ng-app="ageApp" lang="ja" >
  <head>
    <meta http-equiv="content-language" content="ja">
    <meta charset="UTF-8">
    <link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script  charset="UTF-8" src="script.js"></script>
  </head>

  <body>
    <div ng-controller="PageCtr" >
        
        <piza   >うまい！</piza>
        <karaage>うまい！</karaage>

    </div>
  </body>

</html>

angular.module('ageApp', []);

angular.module("ageApp")
    .directive("piza",function(){
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            template: '<div ><span class="glyphicon glyphicon-cutlery">ぴざは、</span>' +
                    '<span ng-transclude> very nice!</span>' +
                    '<span class="glyphicon glyphicon-heart"></span></div>'       
        }})
    .directive("karaage",function(){
        return {
            restrict: 'E',
            replace: true,
            template: '<div ><span class="glyphicon glyphicon-cutlery">唐揚げは、</span>' +
                    '<span > very nice!</span>' +
                    '<span class="glyphicon glyphicon-heart"></span></div>'       
        }});



angular.module("ageApp")
    .controller("PageCtr",function($scope){
    });

/* Styles go here */