AngularJS优雅的自定义指令

前端之家收集整理的这篇文章主要介绍了AngularJS优雅的自定义指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

学习要点 •为什么使用指令 •创建自定义指令 •使用jqLite工作

一、为什么使用自定义指令

NG内置了许多自定义指令,但是它们有时并不能满足你的要求,这是需要我们创建自定义属性

二、自定义指令

接下来,我们来做一个小案例,当鼠标单击加价后,列表项自动递增,当然列表也是通过指令自动添加的,它本就是一个空的div

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE>

<html ng-app="exampleApp">

Angluar test <Meta charset="utf-8"/> Products

<script type="text/javascript" src="js/angular.min.js">

<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']];
// 创建一个

    标签元素
    var ul = angular.element("
      ");
      // 在应用该指令的元素中添加

        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) {
        // 创建一个
      • 标签元素
        var li = angular.element("
      • ");
        // 将
      • 标签添加

          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",price: 2.42,expiry: 7 },{ name: "Pears",price: 2.02,expiry: 6 }
          ];
          // 递增价格
          $scope.incrementPrices = function () {
          for (var i = 0; i < $scope.products.length; i++) {
          $scope.products[i].price++;
          }
          }
          })

解析:

第一步:创建控制器,添加数据模型products和递增价格incrementPrices()方法 第二步:自定义unorderlist标签,该标签的作用是:通过作用域数据模型的值,将其值以无序列表的方式展示出来 第三部:并且在单击加价按钮时,无序列表的值会依次递增

这里写图片描述

三、使用jqLite工作

NG内置了jqLite,它是JQuery的缩小版

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE>

<html ng-app="exampleApp">

Angluar test <Meta charset="utf-8"/>
  1. Apples
    • Bananas
    • Cherries
    • Oranges
  2. Pears
  3. Oranges

解析:

第一步:自定义控制器,定义数据模型names 第二步:自定义指令,功能是将使用指令的元素下的所有li找出,并且更加值的不同赋给字体不同的颜色 第三步:在视图中调用并且使用指令

这里写图片描述

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/47490.html

猜你在找的JavaScript相关文章