列举Augluar 常见的自定义指令参数？
参考回答
在AngularJS中，自定义指令支持多种参数，用于定义指令的行为和功能。以下是常见的自定义指令参数：
restrict：限制指令的使用方式，如属性、元素、类或注释。template/templateUrl：定义指令的HTML内容或外部模板路径。scope：设置隔离作用域及数据绑定方式（@、=、&）。link：定义DOM操作和事件监听的逻辑。controller：定义控制器，用于共享逻辑。require：用于获取其他指令的控制器。transclude：启用内容插入，将子元素插入到指令模板中。priority：设置指令的优先级，数值越大优先级越高。terminal：设置是否阻止其他指令的执行。compile：定义指令的编译阶段逻辑。
详细讲解与示例
1. restrict
用于限制指令的声明方式，支持以下值：
– A：作为属性使用（默认值）。
– E：作为元素使用。
– C：作为类使用。
– M：作为注释使用。
示例：
app.directive('myDirective', function() {
return {
restrict: 'AE', // 可作为属性或元素使用
template: '<p>Directive Content</p>'
};
});
使用：
<my-directive></my-directive>
<div my-directive></div>
2. template / templateUrl
template：内联HTML模板。templateUrl：外部HTML模板文件路径。
示例：
app.directive('myDirective', function() {
return {
restrict: 'E',
template: '<p>This is inline template</p>'
};
});
或：
app.directive('myDirective', function() {
return {
restrict: 'E',
templateUrl: 'template.html'
};
});
3. scope
定义隔离作用域和数据绑定方式：
– @：字符串绑定。
– =：双向绑定。
– &：函数绑定。
示例：
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
title: '@', // 传递字符串
user: '=', // 双向绑定
onClick: '&' // 传递函数
},
template: `
<h1>{{ title }}</h1>
<input ng-model="user.name">
<button ng-click="onClick()">Click Me</button>
`
};
});
使用：
<my-directive
title="Hello"
user="currentUser"
on-click="handleClick()">
</my-directive>
4. link
用于定义指令的操作逻辑，处理DOM操作或事件绑定。
示例：
app.directive('myDirective', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('click', function() {
element.css('color', 'red');
});
}
};
});
5. controller
定义指令的控制器，可以共享逻辑。
示例：
app.directive('myDirective', function() {
return {
restrict: 'E',
controller: function(scope) {scope.message = 'Hello from directive controller';
},
template: '<p>{{ message }}</p>'
};
});
6. require
用于获取其他指令的控制器，支持指令之间的通信。
示例：
app.directive('parentDirective', function() {
return {
restrict: 'E',
controller: function($scope) {
this.logMessage = function(msg) {
console.log(msg);
};
}
};
});
app.directive('childDirective', function() {
return {
restrict: 'E',
require: '^parentDirective', // 获取父指令的控制器
link: function(scope, element, attrs, parentCtrl) {
parentCtrl.logMessage('Message from child directive');
}
};
});
7. transclude
用于插入指令的子元素内容。
示例：
app.directive('myDirective', function() {
return {
restrict: 'E',
transclude: true,
template: '<div><ng-transclude></ng-transclude></div>'
};
});
使用：
<my-directive>
<p>Content inside directive</p>
</my-directive>
8. priority
定义指令的优先级，数值越大，优先级越高。
示例：
app.directive('firstDirective', function() {
return {
restrict: 'A',
priority: 2,
link: function() {
console.log('First Directive');
}
};
});
app.directive('secondDirective', function() {
return {
restrict: 'A',
priority: 1,
link: function() {
console.log('Second Directive');
}
};
});
9. terminal
阻止优先级更低的指令执行。
示例：
app.directive('myDirective', function() {
return {
restrict: 'A',
priority: 2,
terminal: true,
link: function() {
console.log('Terminal Directive');
}
};
});
10. compile
处理指令的编译逻辑，在link阶段之前执行。
示例：
app.directive('myDirective', function() {
return {
restrict: 'A',
compile: function(tElement) {
tElement.addClass('compiled');
return function link(scope, element) {
element.text('Directive compiled and linked');
};
}
};
});
总结
AngularJS的自定义指令参数提供了灵活的功能配置，可以满足多样化的开发需求。在使用时，应该根据需求选择合适的参数组合，并遵循Angular的最佳实践，以确保代码清晰、易维护和高效。