一：自定义指令常用模板
下面是大致的说明，不是全面的，后面来具体说明一些没有提及的细节和重要的相关知识：
angular.module('yelloxingApp', []).directive('uiDirective', function() {
return {
restrict:String,//标明该指令可以在模板中用于元素E、属性A、类C和注释M或组合 priority:Number,//设置指令执行优先级，在某个DOM上优先级高的会先执行 terminal:Boolean, template:String or Template Function,//就是设置模板，和下面的templateUrl属性二个只可以设置一个，目的一样 templateUrl:String or Template Function,//除了字符串，这二个属性还可以设置函数 replace:Boolean,//指令模板是否替换原来的元素 scope:Boolean or Object, controller:String or function(scope, element, attrs) {
... }
, require:String or Array, //你需要知道link在每个实例都执行一遍，compile全程只会执行一遍 link: function(scope, element, attrs,ctrl) {
... }
, compile:function(element, attrs) {
//常用的就是compile的此处写执行一次的代码，或者在link方法里面写和dom有关的操作 }
}
;
}
);
二：一些属性说明
【scope】
可以设置boolean或者对象，先来说说boolean，这个比较简单：
1.当设置true的时候，表示继承父scope，是一个子scope；
2.当设置false的时候，直接使用父scope。
还有一种对象设置方法，就是设置一种隔离的scope，在使用隔离scope的时候，提供了三种方法同隔离之外的地方交互，下面用一个例子来一一说明：
angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) {
return {
restrict: 'A', scope: {
_userDataName: "=userDataName", _onSend: "&onSend", _fromName: "@fromName" }
, template: ` <button ng-click="_useParentMethod()"> 点击按钮调用父级的方法 </button> <input ng-model="_userDataName"/> <ul> <li>fromName={
{
newfromname}
}
</li> <li>这是从父级获取到的{
{
_userDataName}
}
</li> </ul>`, link: function($scope, element, attrs) {
//使用@符号可将本地作用域的变量与DOM属性的值进行绑定，即这里通过@得到父类fromName的值 $scope.newfromname = $scope._fromName;
$scope._useParentMethod = function() {
//使用&符号可以在其中调用父类的方法 $scope._onSend({
"email": {
"email": "yelloxing@gmail.com" }
}
);
console.log($scope._userDataName);
}
;
}
}
;
}
]);
上面是指令的写法，下面来看看控制器里面有什么：
$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
console.error(email);
}
最后别忘了html里面的使用：
【require】
请求另外的controller，然后作为link方法的第四个参数传递进去，我们需要注意的是查找控制器的方法。
查找控制器的方法可以这样理解：使用？表示如果在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数，如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器，他们也可以组合，比如require: "?^ngModel"，如果没有前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器（或具有指定名字的指令）就抛出一个错误。
【terminal】
属性terminal:为true时，指示优先级小于当前指令的指令都不执行，仅执行到本指令。
三：视图和model之间的数据格式化
类似过滤器的功能，有时候我们希望页面显示的是数据经过某种翻译后的样子，以便于约定，不过对于数据库也许简单的序号会更有益，因此你可能会需要在link中使用下面的方法来实现这个功能：
1.ctrl.$formatters.unshift(function(input) {//model到view的数据格式化})；
2.ctrl.$parsers.unshift(function(input) {//view到model的数据格式化})。
上面的$formatters和$parsers就是二个队列，视图到model和model到视图，会方便经过里面定义的方法的过滤，有点类似管道流，最后流到目的地。
别忘了设置类似require: "?ngModel"这样的语句去查找控制器。
四：视图和model数据同步问题
有时候在指令里面通过jquery修改了input的数据，不过angularjs并不会知道，这时候，你可以选择下面中的一个方法：
1.触发输入框change改变，让Angularjs发现数据改变了，从而去调用$setViewValue(value),同步数据：$("input").trigger("change");
2.直接手动触发同步value到viewValue和modelValue中的行为：ctrl.$setViewValue($scope.info)。
五：几个零碎的技巧
1.根据输入框是否合法来设置true或false：ctrl.$setValidity(errorType, boolean);//errorType表示错误类别，可以自定义
2.设置监听指定的一个model值，当然还有监听集合等方法：$scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});
3.有时候在指令里面新添加的字符串需要被angularjs管理，就可以用下面的方法编译一下：$compile(newHtml)($scope)。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Angular17之Angular自定义指令详解
- AngularJS实现自定义指令及指令配置项的方法
- Angular.js通过自定义指令directive实现滑块滑动效果
- Angularjs自定义指令实现分页插件(DEMO)
- 详解angularJS自定义指令间的相互交互
- 详解angular 中的自定义指令之详解API
- AngularJS实现自定义指令与控制器数据交互的方法示例
- 深究AngularJS如何获取input的焦点（自定义指令）
- AngularJS自定义指令详解（有分页插件代码）
- Angularjs自定义指令Directive详解
