js代码如下：
var appModule = angular.module("appModule", []);
appModule.controller("Ctrl", ["$scope", "$timeout", function($scope, $timeout) {
$scope.naomi = { name: "Naomi", address: "1600 Amphitheatre" };
$scope.igor = { name: "Igor", address: "123 Somewhere" };
$scope.vojta = { name: "Vojta", address: "3456 Somewhere Else" };
$scope.format = "M/d/yy h:mm:ss a";
$scope.name = "Tobias";
$scope.hideDialog = function () {
$scope.dialogIsHidden = true;
$timeout(function () {
$scope.dialogIsHidden = false;
}, 2000);
};
}]);
appModule.directive('myTabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
};
this.addPane = function(pane) {
if (panes.length == 0) {
$scope.select(pane);
}
panes.push(pane);
};
},
templateUrl: 'my-tabs.html'
};
});
appModule.directive('myPane', function() {
return {
require: '^myTabs',
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
templateUrl: 'my-pane.html'
};
});
appModule.directive("myDraggable", ["$document", function($document) {
return function(scope, elem, attrs) {
var startX = 0, startY = 0, x = 0, y = 0;
elem.css({
position: "relative",
border: "1px solid red",
backgroundColor: "lightgrey",
cursor: "pointer"
});
elem.on("mousedown", function(event) {
// 组织所选对象的默认拖曳操作
event.preventDefault();
startX = event.pageX - x;
startY = event.pageY - y;
$document.on("mousemove", mousemove);
$document.on("mouseup", mouseup);
});
function mousemove(event) {
y = event.pageY - startY;
x = event.pageX - startX;
elem.css({
top: y + "px",
left: x + "px"
});
}
function mouseup() {
$document.off("mousemove", mousemove);
$document.off("mouseup", mouseup);
}
}
}]);
appModule.directive("myDialog", function() {
return {
restrict: "E",
transclude: true,
scope: {
"close": "&onClose"
},
templateUrl: "my-dialog.html",
link: function (scope, ele, attrs) {
scope.name = "Jeff";
}
};
});
appModule.directive("myCustomer", [function() {
return {
restrict: "E",
scope: {
customerInfo: "=info"
},
transclude: true,
template: "",
templateUrl: "tpls.html",
link: function(scope, element, attrs) {
}
};
}]);
appModule.directive("myCurrentTime", ["$timeout", "dateFilter", function($timeout, dateFilter) {
return {
link: function (scope, element, attrs) {
var format, timeoutId;
function updateTime() {
//使用内置dateFilter服务
element.text(dateFilter(new Date(), format));
//使用内置$filter服务
//element.text($filter("date")(new Date(), format));
}
scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateTime();
});
function scheduleUpdate() {
timeoutId = $timeout(function() {
updateTime();
scheduleUpdate();
}, 1000);
}
element.on("$destroy", function() {
$timeout.cancel(timeoutId);
});
scheduleUpdate();
}
}
}]);
创建指令
最佳实践： 尽量返回一个对象，而不要只返回一个函数。为了防止与未来的标准冲突，最好是前缀化你自己的指令名字。
require
当指令使用这个选项，
$compile服务会查找一个名叫myTabs的控制器，如果没有找到，就会抛出一个错误。该选项的值可以分别用前缀?、^和?^进行修饰，也可以不修饰。使用^前缀意味着指令将会在它的父元素上面搜索控制器，使用?前缀就意味着如果在当前指令没有找到控制器，就将null作为link的第四个参数，如果将?和^结合起来，我们就可以既指定上游指令，又可以在找不到时，不抛出严重的错误。没有前缀修饰，指令默认只在所属元素上搜索指定的控制器。restrict
该选项指定创建指令的方式，创建方式有E（元素），A（属性），C（类名），M（注释）,因此可以取值"E"，"EA"，"EAC"，"EACM"等等。最佳实践：最好通过标签名和属性来使用指令而不要通过注释和类名。这样做可以更容易地看出一个元素是跟哪个指令匹配的。通常注释式命名式指令使用在如下情景：某些指令需要跨越多个元素，但是受DOM API的限制，无法跨越多个元素(比如<table>元素)。 AngularJS 1.2 引入了ng-repeat-start和ng-repeat-end指令，作为更好的解决方案。 建议开发者使用这种方式，而不要用“自定义注释”形式的指令。什么情况下该用元素名，什么情况下该用属性名？ 当创建一个含有自己模板的组件的时候，建议使用元素名，常见情况是，当你想为你的模板创建一个DSL（特定领域语言）的时候。如果仅仅想为已有的元素添加功能，建议使用属性名。
scope
该选项给指令创建独立作用域。如果指令没有创建独立作用域，那么指令在给定的作用域内仅能使用一次，要重用该指令就必须为它新创建一个控制器。最佳实践：如果要使你的组件在应用范围内可重用，那么使用scope选项去创建一个独立作用域。如上代码所示，customerInfo对应为指令独立作用域里的customerInfo属性，值（'=info'）告诉$compile这里绑定了所在元素的info属性，而info属性就可绑定父作用域的属性，即可达到指令内部作用域与父作用域通信的目的。注意: 指令作用域选项中的'=attr'属性名是被规范化过后的名字. 比如要绑定
<div bind-to-this="thing">,你就要使用'=bindToThis'的绑定。scope的绑定策略：=代表与父作用域中的属性双向绑定，@代表把当前属性作为字符串传递，也可绑定父作用域的值，&代表传递一个来自父作用域的函数，稍后调用。template && templateUrl
指令使用的模版。最佳实践：除非你的模板非常小，否则最好分割成单独的hmtl文件，然后使用templateUrl选项来加载。
link
指令修改DOM通常是在link选项中，link选项接受一个带有如下签名的函数function link(scope,element,attrs,ctrls) {...} 其中： scope是一个Angular的scope对象.，element 指令匹配的jqLite封装的元素(angular内部实现的类jquery的库) ，attrs 是一个带有规范化后属性名字和相应值的对象，ctrls是指令依赖的所有控制器集合。被angular编译过的DOM元素被移除的时候， 它会触发一个$destroy 事件。最佳实践： 指令应该自己管理自身分配的内存。当指令被移除时， 你可以使用
element.on('$destroy', ...) 或scope.$on('$destroy', ...)来执行一个清理的工作。
transclude
该选项使得指令所包裹的内容能够访问指令外部的作用域。最佳实践: 仅当你要创建一个包裹任意内容的指令的时候使用transclude: true。
controller
该选项可为指令定义一个控制器，然后其它指令通过require去查找这个控制器，并将该控制器的示例作为link函数第四个参数进行调用。最佳实践: 当你想暴露一个API给其它的指令调用那就用controller,否则用link。