Angularjsのカスタム命令のいくつかの価値のある詳細とテクニックについて
一:カスタム命令共通テンプレート
以下は大まかな説明で、全面的ではありません.後で、言及されていない詳細と重要な関連知識を具体的に説明します.
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を直接使用します.
もう1つのオブジェクト設定方法は、分離されたscopeを設定することです.分離scopeを使用する場合、3つの方法が分離以外の場所とインタラクティブになります.次に、1つの例で説明します.
angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) {
return {
restrict: 'A',
scope: {
_userDataName: "=userDataName",
_onSend: "&onSend",
_fromName: "@fromName"
},
template: `
- fromName={{newfromname}}
- {{_userDataName}}
`,
link: function($scope, element, attrs) {
// @ DOM ， @ fromName
$scope.newfromname = $scope._fromName;
$scope._useParentMethod = function() {
// &
$scope._onSend({ "email": { "email": "[email protected]" } });
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)。
六：常用方法或服务
解析一段字符串（可能是属性也可能是方法）的方法有二个，直接看下面例子：
$scope.getInfo=function(){
console.log(' ');
};
var funName="getInfo()";
// ：
$scope.$eval(funName);
// ：
$parse(funName)($scope);