关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。如：定义myDirective，使用时 像这样：<my-directive>。
这里列出directive的合法命名：
- ng:bind
- ng-bind
- ng_bind
- x-ng-bind
- data-ng-bind
我是教师，在新建试题输入分数的时候应该只能输入数字才对，输入其他内容是不合法的，而且我希望这个分数是1~10之间的数字。能否只在输入框上加一个属性.我们定义一个叫做fractionNum的指令如下
app.directive('fractionNum',function(){
return {
link : function(scope, elements, attrs, controller){
elements[0].onkeyup = function(){
if(isNaN(this.value) || this.value<1 || this.value>10){
this.style.borderColor = 'red';
}
else{
this.style.borderColor = '';
}
};
}
};
});
link的值是一个函数，用来定义指令的行为。从传入的参数中可以获取到当前元素，我们便可以拿当前元素开刀了。我在此处监听当前元素的keyup事件，获取元素的值，如果不是1~10之间的数字，则把输入框的边框颜色变为红色。这下这个指令就可以工作了。定义好的指令就可以在模板中使用了，使用方法如下：
分数:<input type="text" ng-model="question.fraction" fraction-num /><br />
controller，link，compile有什么不同
//directives.js增加exampleDirective
phonecatDirectives.directive('exampleDirective', function() {
return {
restrict: 'E',
template: '<p>Hello {{number}}!</p>',
controller: function($scope, $element){
$scope.number = $scope.number + "22222 ";
},
//controllerAs:'myController',
link: function(scope, el, attr) {
scope.number = scope.number + "33333 ";
},
compile: function(element, attributes) {
return {
pre: function preLink(scope, element, attributes) {
scope.number = scope.number + "44444 ";
},
post: function postLink(scope, element, attributes) {
scope.number = scope.number + "55555 ";
}
};
}
}
});
//controller.js添加
dtControllers.controller('directive2',['$scope',
function($scope) {
$scope.number = '1111 ';
}
]);
//html
<body ng-app="phonecatApp">
<div ng-controller="directive2">
<example-directive></example-directive>
</div>
</body>
运行结果：
Hello 1111 22222 44444 55555 !
由结果可以看出来，controller先运行，compile后运行，link不运行(link就是compile中的postLink)。将上例中的compile注释掉运行结果：
Hello 1111 22222 33333 !
由结果可以看出来，controller先运行，link后运行，link和compile不兼容。compile改变dom,link事件的触发和绑定
分享到：
相关推荐
某天一位前端大神问我：你知道angular指令中的controller,compile,link函数有什么不同？然后我就一脸懵逼了….于是决定深入的去探究下。 今天我们来一起了解一下它们有什么不同的地方: 先看一段示例代码 var ag =...
在这个"angularjs-directive-workshop"中，我们将深入探讨 AngularJS 的指令特性，这些是构建可复用、组件化的前端应用的关键工具。 指令是 AngularJS 的核心特性之一，它们允许我们扩展 HTML，添加自定义的行为和...
AngularJS 是一款非常强大的前端框架，它的核心特性之一就是指令（Directives）。本文将详细介绍 AngularJS 指令的相关概念及其如何运作。 #### 一、指令概述 指令可以简单地理解为在特定 DOM 元素上运行的函数，...
AngularJS 指令是框架的核心特性之一，它们允许你扩展HTML的语义，使HTML能够表达更多的业务逻辑和数据绑定。指令通过在HTML元素、属性、类或注释中声明，从而在页面加载时被AngularJS的编译器识别和执行。 1. **...
在这个"angularjs-directives-demo"项目中，我们将深入探讨AngularJS的指令系统，这是AngularJS的核心特性之一。 指令是AngularJS中用于扩展HTML的一种方式，它们可以赋予HTML新的行为，让HTML更加动态和交互。在这...
开发者还可以自定义指令，通过`link`函数处理DOM操作，`controller`函数处理业务逻辑，`compile`函数预处理模板。 在`Demo`这个压缩包文件中，可能包含了各种示例代码，涵盖了上述概念的实践应用。通过学习和分析...
封装指令的创建需要开发者了解AngularJS的作用域（Scope）、控制器（Controller）、模板（Template）以及指令的链接函数（Link Function）和编译函数（Compile Function）等概念。 与jQuery类库协作是AngularJS封装...
在AngularJS框架中，指令是核心特性之一，它们允许开发者扩展HTML，使其具有丰富的交互性和动态行为。"n4directives"很可能是一个专注于AngularJS自定义指令开发的项目或者库，旨在提供一套实用的、可复用的指令集合...
- `require`: 定义指令依赖的其他指令，可以是一个字符串或数组，用于在`link`或`compile`函数中访问这些依赖的指令。 - `link`和`compile`: `link`函数在指令实例化时运行，常用于DOM操作和数据绑定。`compile`...
例如，指令中还可以包含编译（compile）函数和控制器（controller）函数，以及绑定隔离作用域（scope）的属性。编译函数用于编译模板，生成指令的DOM结构，而控制器函数用于处理指令内部的逻辑。 指令系统的设计...
`compile`函数则用于预处理指令的模板，返回一个`link`函数，可以在编译阶段对DOM进行修改。 在实现分页功能时，自定义指令可能包含分页按钮、当前页数显示、总页数等元素，并且需要处理用户点击分页按钮的事件，...
指令是AngularJS `$compile` 服务的说明，它们定义了当特定的HTML标签（属性、元素名称或注释）出现在DOM中时，编译器应如何处理这些元素。例如，内置指令如 `ngBind` 和 `ngView` 添加了特定的行为，使得数据绑定和...
在AngularJS中，自定义指令是框架的核心特性之一，它允许开发者扩展HTML的功能，创建新的DOM元素或修改已有元素的行为。本项目“mastering-angularjs-directives”显然是一个专注于讲解和展示AngularJS自定义指令...
- **18.3 基本的自定义方法**：定义自定义指令的方法包括`link`函数、`controller`等。 - **18.4 属性值类型的自定义**：AngularJS支持不同的属性值类型，如字符串、数字、函数等。 - **18.5 Compile的细节**：`...
***pile和link函数：compile函数用于编译指令的模板，并返回link函数。link函数负责处理实际的DOM操作，它接收作用域、元素和属性作为参数。通过link函数可以设置元素的样式、绑定事件监听器等。 6. 控制器...
4. **指令的生命周期**：理解 directive 的编译（compile）、链接（link）等阶段，有助于编写复杂指令。 5. **测试（Testing）**：使用 Karma 和 Jasmine 进行单元测试和端到端测试，确保代码质量。 6. **动画...
在AngularJS中，`ng-repeat`指令用于循环遍历数组或对象，生成DOM元素，它在构建可重用和动态的UI组件时非常有用。在本例中，开发者遇到的问题是在`ng-repeat`循环中包含动态HTML，这些HTML中还嵌套了自定义指令。...
- **编译（Compile）和链接（Link）过程**：每个指令都有编译和链接两个阶段。编译阶段处理元素和属性，收集指令，而链接阶段将指令与实际的DOM元素关联起来，建立数据绑定。 - **作用域（Scope）**：指令与作用域...