angularjs 指令详解.pdfVIP

angularjs 指令详解 通过指令机制，angularjs 提供了一个强大的扩展系统，我们可以通过自定义指令来扩展自己的指令系统。 怎样定义自己的指令呢？ 我们通过 Bootstrap UI 来学习吧。这个项目使用 angularjs 将 Bootstrap 3 进行了封装，是我们学习 angularjs 很好的 样例。 从 Alert 开始 首先，我们从比较简单的 alert 指令来开始学习。 在 Bootstrap 中，警告框使用类 alert 来表示, 通过 alert-success ，alert-info ，alert-warning, alert-danger 来表示不 同类型的警告。 div class=alert alert-success.../div div class=alert alert-info.../div div class=alert alert-warning.../div div class=alert alert-danger.../div 对于可关闭的警告框来说，还可以用一个可选的.alert-dismissable 和关闭按钮，但是，这是通过脚本来实现的，在 bootstrap ui 这里没有使用。 div class=alert alert-warning alert-dismissable button type =button class=close data-dismiss=alert aria-hidden=truetimes;/button strongWarning! /strong Best check yo self, youre not looking too good. /div bootstrap UI 中的用法 在 Bootstrap UI 的示例中，我们可以直接通过自定义的 alert 来定义一个提示。其中的 type 用来定义提示的类型，提示 的信息内容通过绑定来处理。 div ng-controller=AlertDemoCtrl alert ng-repeat=alert in alerts type =alert.type close=closeAlert($index){{alert.msg}}/alert button class=btn btn-default ng-click=addAlert()Add Alert /button /div 对应的脚本 function AlertDemoCtrl($scope) { $scope.alerts = [ { type: danger, msg: Oh snap! Change a few things up and try submitting again. }, { type: success, msg: Well done! You successfully read this important alert message. } 1 / 8 ]; $scope.addAlert = function() { $scope.alerts.push({msg: Another alert!}); }; $scope.closeAlert = function(index) { $scope.alerts.splice(index, 1); }; } bootstrap UI 中的定义 下面就是指令的定义了。 angular.module(ui.bootstrap.alert, []) .controller(AlertController, [$scope, $attrs, function ($scope, $attrs) { $scope.closeable = close in $attrs; }]) .directive(alert, function () { return { restrict:EA, controller:AlertController, templateUrl:template/alert/alert.html, transclude:true, replace:true,