标签：
<!DOCTYPE html> <html ng-app="Demo"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="jquery-1.8.3.min.js"></script> <script src="angular.min.js"></script> <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> <script> 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‘ //以元素或属性的形式使用命令 }; }); </script> </body> </html>
<!DOCTYPE html> <html ng-app="Demo"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="jquery-1.8.3.min.js"></script> <script src="angular.min.js"></script> <p color="red">有颜色的文本</p> <color color="red">有颜色的文本</color> <script> var app = angular.module(‘Demo‘, [], angular.noop); app.directive(‘color‘, function() { var link = function($scope, $element, $attrs) { $element.css(‘color‘, $attrs.color); } return { link: link, restrict: ‘AE‘ }; }); </script> </body> </html>
<!DOCTYPE html> <html ng-app="Demo"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="jquery-1.8.3.min.js"></script> <script src="angular.min.js"></script> <div ng-controller="TestCtrl"> <p color="color">有颜色的文本</p> <p color="‘blue‘">有颜色的文本</p> </div> <script> var app = angular.module(‘Demo‘, [], angular.noop); app.directive(‘color‘, function() { var link = function($scope, $element, $attrs) { console.log($attrs) $scope.$watch($attrs.color, function(new_v) { console.log(new_v) $element.css(‘color‘, new_v); }); } return link; }); app.controller(‘TestCtrl‘, function($scope) { $scope.color = ‘red‘; }); </script> </body> </html>
<!DOCTYPE html> <html ng-app="Demo"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="jquery-1.8.3.min.js"></script> <script src="angular.min.js"></script> <div ng-controller="TestCtrl"></div> <div id="a">A {{ text }}</div> <div id="b">B </div> <script> var app = angular.module(‘Demo‘, [], angular.noop); app.controller(‘TestCtrl‘, function($scope, $compile) { var link = $compile($(‘#a‘)); //true参数表示新建一个完全隔离的scope,而不是继承的child scope var scope = $scope.$new(true); scope.text = ‘12345‘; //var node = link(scope, function(){}); var node = link(scope); $(‘#b‘).append(node); }); </script> </body> </html>
<!DOCTYPE html> <html ng-app="Demo"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="jquery-1.8.3.min.js"></script> <script src="angular.min.js"></script> <div ng-controller="TestCtrl"></div> <div id="a">A {{ text }}</div> <div id="b">B </div> <script> var app = angular.module(‘Demo‘, [], angular.noop); app.controller(‘TestCtrl‘, function($scope, $compile) { var link = $compile($(‘#a‘)); var scope = $scope.$new(true); scope.text = ‘12345‘; var node = link(scope, function(clone_element, scope) { clone_element.text(clone_element.text() + ‘ ...‘); //无效 clone_element.text(‘{{ text2 }}‘); //无效 clone_element.addClass(‘new_class‘); }); $(‘#b‘).append(node); }); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/jzm17173/p/4220630.html
