xuyuanme · August 29, 2015 13:56 · Feb 16, 2014 · Feb 16, 2014
diff --git a/directive.js b/directive.js
@@ -2,16 +2,16 @@ angular.module("alert-directive", [])
 
     .directive('alert', function () {
         return {
-            restrict: 'EA',
-            replace: true,
+            restrict: 'EA', // support to be used as an element or an attribute
+            replace: true, // tells the compiler to replace the original directive's element with the template given by the template field
             template: '<div class="alert alert-{{type || \'info\'}}">' +
                 '<button type="button" class="close" ng-click="close()">&times;</button>' +
-                '<div ng-transclude></div>' +
+                '<div ng-transclude></div>' + // the ng-transclude directive gets the transcluded elements and appends them to the element in the template on which it appears
                 '</div>',
-            transclude: true,
-            scope: {
-                type: '=',
-                close: '&'
+            transclude: true, // tells the compiler to extract the contents of the original <alert> element and make them available to be transcluded into the template
+            scope: { // create an isolated scope
+                type: '=', // the = symbol indicates that AngularJS should keep the expression in the specified attribute and the value on the isolated scope in sync with each other
+                close: '&' // the & symbol indicates that the expression provided in the attribute on the element will be made available on the scope as a function
             }
         };
     });
diff --git a/directive.js b/directive.js
@@ -0,0 +1,17 @@
+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: '&'
+            }
+        };
+    });