Angular.js自定义指令学习笔记实例

在Angular.js中，自定义指令是扩展框架功能和创建可重用组件的关键特性。通过自定义指令，开发者能够创建自己的HTML元素或属性，这些元素和属性具有特定的行为和交互。以下将详细介绍Angular.js自定义指令的创建过程及其相关参数。 让我们了解如何创建一个自定义指令。在Angular.js中，我们使用`angular.module().directive()`来定义一个新的指令。在这个例子中，我们创建了一个名为`selfDirect`的指令： ```javascript var m = angular.module('angularJS', []); m.directive('selfDirect', [function () { return { restrict: 'E', // ... }; }]); ``` `selfDirect`是自定义指令的名称，遵循驼峰命名规则。`restrict`属性用于指定指令的使用方式，它可以是'E'(元素), 'A'(属性), 'C'(类)或'M'(注释)的组合。在这个示例中，我们使用'E'，意味着指令将作为一个独立的HTML元素使用，例如`<self-direct>`。 接下来，我们可以设置`template`属性来定义指令内部的HTML结构。`template`可以是一个字符串，也可以是一个函数，用于动态生成HTML。在本例中，它包含了`ng-transclude`指令，允许我们插入外部内容到指令内部： ```javascript template: '<h1><span ng-transclude=""></span>This is a Angular.js direction of self definition</h1><div ng-transclude=""></div>', ``` `ng-transclude`是一个内置指令，用于将元素内的内容替换为其自身，这对于创建可复用组件非常有用。`replace`属性如果设为`true`，则指令元素会被其模板内容替换，但在这里并未设置。 `transclude`属性设置为`true`，表示我们要启用内容插槽，使得外部内容可以被插入到指令的特定位置。在上述模板中，我们有两个`ng-transclude`元素，它们将包含外部传递给指令的任何内容。 另外，`scope`属性可以用来定义指令作用域的隔离。当设置为`true`（默认为`false`），创建一个新的、独立的作用域，指令内部的变量不会直接继承自父控制器的属性。这可以防止意外的数据污染。 `controller`属性允许我们在指令内部定义一个控制器，该控制器有自己的作用域，并可以处理与指令相关的业务逻辑： ```javascript controller: ['$scope', function ($scope) { $scope.data = {...}; }], ``` `link`函数是我们处理DOM操作的地方。它接收三个参数：`scope`（指令作用域）、`elem`（指令元素）和`attr`（指令元素的属性对象）。例如，我们可能在这里使用`elem.css()`来改变元素的样式，或者使用`scope.$watch()`监听作用域中属性的变化。 ```javascript link: function (scope, elem, attr) { // DOM操作和事件监听 }, ``` Angular.js的自定义指令提供了一种强大的机制，让开发者能够创建高度定制的、可复用的UI组件，并实现复杂的业务逻辑。通过理解并熟练运用指令的各个属性和功能，开发者可以极大地提高代码的组织性和可维护性。