AngularJS 基本的自定义方法
2018-07-26 17:15 更新
自定义一个指令可以非常非常的复杂,但是其基本的调用形式,同自定义服务大概是相同的:
<p show style="font-size: 12px;"></p> <script type="text/javascript"> var app = angular.module('Demo', [], angular.noop); app.directive('show', function(){ var func = function($scope, $element, $attrs){ console.log($scope); console.log($element); console.log($attrs); } return func; //return {compile: function(){return func}} }); angular.bootstrap(document, ['Demo']); </script>
如果在 directive 中直接返回一个函数,则这个函数会作为 compile 的返回值,也即是作为 link 函数使用。这里说的 compile 和 link 都是一个指令的组成部分,一个完整的定义应该返回一个对象,这个对象包括了多个属性:
- name
- priority
- terminal
- scope
- controller
- require
- restrict
- template
- templateUrl
- replace
- transclude
- compile
- link
上面的每一个属性,都可以单独探讨的。
下面是一个完整的基本的指令定义例子:
<code lines> //失去焦点使用 jQuery 的扩展支持冒泡 app.directive('ngBlur', function($parse){ return function($scope, $element, $attr){ var fn = $parse($attr['ngBlur']); $element.on('focusout', function(event){ fn($scope, {$event: event}); }); } }); </code> <div code lines> //失去焦点使用 jQuery 的扩展支持冒泡 app.directive('ngBlur', function($parse){ return function($scope, $element, $attr){ var fn = $parse($attr['ngBlur']); $element.on('focusout', function(event){ fn($scope, {$event: event}); }); } }); </div>
var app = angular.module('Demo', [], angular.noop); app.directive('code', function(){ var func = function($scope, $element, $attrs){ var html = $element.text(); var lines = html.split('\n'); //处理首尾空白 if(lines[0] == ''){lines = lines.slice(1, lines.length - 1)} if(lines[lines.length-1] == ''){lines = lines.slice(0, lines.length - 1)} $element.empty(); //处理外框 (function(){ $element.css('clear', 'both'); $element.css('display', 'block'); $element.css('line-height', '20px'); $element.css('height', '200px'); })(); //是否显示行号的选项 if('lines' in $attrs){ //处理行号 (function(){ var div = $('<div style="width: %spx; background-color: gray;' + 'float: left; text-align: right; padding-right: 5px;' + 'margin-right: 10px;"></div>' .replace('%s', String(lines.length).length * 10)); var s = ''; angular.forEach(lines, function(_, i){ s += '<pre style="margin: 0;">%s</pre>\n'.replace('%s', i + 1); }); div.html(s); $element.append(div); })(); } //处理内容 (function(){ var div = $('<div style="float: left;"></div>'); var s = ''; angular.forEach(lines, function(l){ s += '<span style="margin: 0;">%s</span><br />\n' .replace('%s', l.replace(/\s/g, '<span> </span>')); }); div.html(s); $element.append(div); })(); } return {link: func, restrict: 'AE'}; //以元素或属性的形式使用命令 }); angular.bootstrap(document, ['Demo']);
上面这个自定义的指令,做的事情就是解析节点中的文本内容,然后修改它,再把生成的新内容填充到节点当中去。其间还涉及了节点属性值 lines 的处理。这算是指令中最简单的一种形式。因为它是“一次性使用”,中间没有变量的处理。比如如果节点原来的文本内容是一个变量引用,类似于 {{ code }} ,那上面的代码就不行了。这种情况麻烦得多。后面会讨论。
以上内容是否对您有帮助:
更多建议: