트랜스클루전을 사용해 경고 디렉티브 작성

angular.module('app', ['alert-directive'])

.controller('AlertController', function ($scope) {
  $scope.alerts = [
    { type: 'error', msg: 'Oh snap! Something went wrong.' }, 
    { type: 'success', msg: 'Well done! It worked out in the end.' }
  ];

  $scope.addAlert = function() {
    $scope.alerts.push({msg: "Watch out - another alert!"});
  };

  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };
});

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="directive.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-init="type='success'">
      <div>{{type}}</div>
      <alert type="'info'">Look at {{type}}</alert>
    </div>
  
    <div ng-controller="AlertController" class="well">
      <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
      <button class='btn' ng-click="addAlert()">Add Alert</button>
    </div>

  </body>

</html>

angular.module("alert-directive", [])

.directive('alert', function () {
  return {
    restrict:'EA',
    replace: true,
    template:
    '<div class="alert alert-{{type || \'info\'}}">' +
      '<button type="button" class="close" ng-click="close()">&times;</button>' +
      '<div ng-transclude></div>' +
    '</div>',
    transclude:true,
    scope:{
      type:'=',
      close:'&'
    }
  };
});