学习要点
•为什么使用指令
•创建自定义指令
•使用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找出，并且更加值的不同赋给字体不同的颜色
第三步：在视图中调用并且使用指令
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论