AngularJS学习笔记
<!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>
