Alert.PNG
上圖是Alert的效果颅和，可以動態(tài)的添加和刪除里面的alert標(biāo)簽。通過閱讀源碼可以看出赖阻，這個指令把alert封裝出來了一個uib-alert指令框杜。通過$attr服務(wù)浦楣，把uib-alert指令中的屬性設(shè)置傳遞到指令中。大家寫指令的時候可以借鑒一下咪辱。
下面是源碼：
angular.module("ui.bootstrap", ["ui.bootstrap.tpls","ui.bootstrap.alert"]);
angular.module("ui.bootstrap.tpls", ["uib/template/alert/alert.html"]);
angular.module('ui.bootstrap.alert', [])
//$attrs當(dāng)前屬性的椒振，并且這里的controller不是父級作用域的的控制器，是指令中的控制器梧乘。里面對應(yīng)的scope也是指令的scope
.controller('UibAlertController', ['$scope', '$attrs', '$interpolate', '$timeout', function($scope, $attrs, $interpolate, $timeout) {
$scope.closeable = !!$attrs.close;
var dismissOnTimeout = angular.isDefined($attrs.dismissOnTimeout) ? //是否設(shè)置了自動關(guān)閉屬性
$interpolate($attrs.dismissOnTimeout)($scope.$parent) : null;
if (dismissOnTimeout) {//如果設(shè)置了自動關(guān)閉屬性，就會觸發(fā)close()
$timeout(function() {
$scope.close();
}, parseInt(dismissOnTimeout, 10));
}
}])
//uib-alert指令
.directive('uibAlert', function() {
return {
controller: 'UibAlertController',//需要將指令中的方法暴露出去庐杨，需要用controller
controllerAs: 'alert',
templateUrl: function(element, attrs) {//templateUrl為函數(shù)选调，需要通過調(diào)用attr.templateUrl來獲取，如果屬性中沒有設(shè)置灵份，則使用默認(rèn)的
return attrs.templateUrl || 'uib/template/alert/alert.html';
},
transclude: true,//是否可以替代仁堪。
replace: true,
scope: {
type: '@',//把當(dāng)前屬性的值作為字符串傳遞，使當(dāng)前指令中template中的子集scope中的中的值填渠，等于父級scope中的值弦聂。
close: '&' //傳遞一個來自父層的函數(shù)，稍后調(diào)用
}
};
});
//默認(rèn)的template模板
angular.module("uib/template/alert/alert.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("uib/template/alert/alert.html",
"<div class=\"alert\" ng-class=\"['alert-' + (type || 'warning'), closeable ? 'alert-dismissible' : null]\" role=\"alert\">\n" +
" <button ng-show=\"closeable\" type=\"button\" class=\"close\" ng-click=\"close({$event: $event})\">\n" +
" <span aria-hidden=\"true\">×</span>\n" +
" <span class=\"sr-only\">Close</span>\n" +
" </button>\n" +
" <div ng-transclude></div>\n" +
"</div>\n" +
"");
}]);
