AngularJS优雅的自定义指令
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS优雅的自定义指令，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4298字，纯文字阅读大概需要7分钟。
内容图文
学习要点
?为什么使用指令
?创建自定义指令
?使用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找出，并且更加值的不同赋给字体不同的颜色
第三步：在视图中调用并且使用指令
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的AngularJS优雅的自定义指令全部内容，希望文章能够帮你解决AngularJS优雅的自定义指令所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。