AngularJS优雅的自定义指令
内容摘要
学习要点
•为什么使用指令
•创建自定义指令
•使用jqLite工作
一、为什么使用自定义指令
NG内置了许多自定义指令，但是它们有时并不能满足你的
•为什么使用指令
•创建自定义指令
•使用jqLite工作
一、为什么使用自定义指令
NG内置了许多自定义指令，但是它们有时并不能满足你的
文章正文
学习要点
•为什么使用指令
•创建自定义指令
•使用jqLite工作
一、为什么使用自定义指令
NG内置了许多自定义指令，但是它们有时并不能满足你的要求，这是需要我们创建自定义属性。
二、自定义指令
接下来，我们来做一个小案例，当鼠标单击加价后，列表项自动递增，当然列表也是通过指令自动添加的，它本就是一个空的div
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angluar test</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<dlv class="panel panel-default" ng-controller="defaultCtrl">
<div class="panel-heading">
<h3>Products</h3>
</div>
<div class="panel-body">
<!-- 点击加价，价格递增 -->
<button type="button" class="btn btn-primary" ng-click="incrementPrices()">加价</button>
</div>
<div class="panel-body">
<!-- 将products数据以一种无序列表的形式展示 -->
<!-- list-property="price | currency" 列表项单位本地化 -->
<div unorderlist="products" list-property="price | currency"></div>
</div>
</dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("exampleApp", [])
.directive("unorderlist", function () {
// scope 作用域
// element 应用该指令的元素
// attrs 使用该指令的元素的属性
return function (scope, element, attrs) {
// attrs['unorderlist'] 获取unorderlist属性值，这里为products
// 获取数据模型值，这里为scope.products
var data = scope[attrs['unorderlist']];
// 创建一个<ul>标签元素
var ul = angular.element("<ul>");
// 在应用该指令的元素中添加<ul>
element.append(ul);
// 获取listProperty属性值，这里为price | currency
var expression = attrs['listProperty'];
// 判断是否为数组
if (angular.isArray(data)) {
// 遍历数据模型scope.products
for (var i = 0; i < data.length; i++) {
// 添加闭包,将i传递进去
(function (index) {
// 创建一个<li>标签元素
var li = angular.element("<li>");
// 将<li>标签添加到<ul>中
ul.append(li);
// 监听器函数，用$eval计算表达式和data[index]的值
var watcherFn = function (watchScope) {
return watchScope.$eval(expression, data[index]);
}
// 添加$watch监听器监听作用域的变化
scope.$watch(watcherFn, function (newValue, oldValue) {
// 更新li的值
li.text(newValue);
})
})(i);
}
}
}
})
.controller("defaultCtrl", function ($scope) {
// 数据模型
$scope.products = [
{ name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
{ name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
{ name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
];
// 递增价格
$scope.incrementPrices = function () {
for (var i = 0; i < $scope.products.length; i++) {
$scope.products[i].price++;
}
}
})
</script>
</body>
</html>
解析：
第一步：创建控制器，添加数据模型products和递增价格incrementPrices()方法
第二步：自定义unorderlist标签，该标签的作用是：通过作用域数据模型的值，将其值以无序列表的方式展示出来
第三部：并且在单击加价按钮时，无序列表的值会依次递增
三、使用jqLite工作
NG内置了jqLite，它是JQuery的缩小版
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angluar test</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<dlv class="panel panel-default">
<!-- 使用自定义指令 -->
<ol dome-directive>
<li>Apples</li>
<ul>
<li>Bananas</li>
<li>Cherries</li>
<li>Oranges</li>
</ul>
<li>Pears</li>
<li>Oranges</li>
</ol>
</dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("exampleApp", [])
.directive("domeDirective", function () {
return function (scope, element, attrs) {
// 找出element元素下所有的li,这里的element是调用者<ol>
var items = element.find("li");
// 要所有的li的font-weight为bold
items.css("font-weight", "bold");
// 遍历li, 值为Oranges的字体颜色为red,其余为green
for (var i = 0; i < items.length; i++) {
if (items.eq(i).text() == "Oranges"){
items.eq(i).css("color", "red");
} else {
items.eq(i).css("color", "green");
}
}
// 打印出li的长度和字体颜色
console.log("Items length : " + items.length);
console.log("Color: " + items.css("color"));
}
})
</script>
</body>
</html>
解析：
第一步：自定义控制器，定义数据模型names
第二步：自定义指令，功能是将使用指令的元素下的所有li找出，并且更加值的不同赋给字体不同的颜色
第三步：在视图中调用并且使用指令
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。
代码注释
作者：喵哥笔记
