扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >Angular1.x自定义指令的示例分析
  • 588

0
分享到

Angular1.x自定义指令的示例分析

2024-04-02 19:04:59 588人浏览 泡泡鱼
摘要

小编给大家分享一下angular1.x自定义指令的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体如下：调用Modul

小编给大家分享一下angular1.x自定义指令的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

具体如下：

调用Module.directive方法，传入指令名称和工厂函数，返回一个对象。

指令名称中每个大写字母会被认为是属性名中的一个独立的词，而每个词之间是以一个连字符分隔的。

var myApp = angular.module('myApp', [])
  .directive("unorderedList", function () {
    return function(scope, element, attrs) {
    };
  });

返回链式函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angularjs Demo</title>
  <link rel="stylesheet" href="../CSS/bootstrap.css" rel="external nofollow" />
  <link rel="stylesheet" href="../css/bootstrap-theme.css" rel="external nofollow" >
  <script src="../js/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4>Products</h4>
    </div>
    <div class="panel-body">
      <div unordered-list="products"></div>
    </div>
  </div>
</body>
<script>
var myApp = angular.module('myApp', [])
  .controller('myCtrl', ["$scope", 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 }
    ];
  }])
  .directive("unorderedList", function () {
    return function (scope, element, attrs) {
      var data = scope[attrs['unorderedList']];
      if( angular.isArray(data) ){
        for(var i=0, len=data.length; i<len; i++){
          console.log(data[i].name);
        }
      }
    };
  });
</script>
</html>

打破对数据属性的依赖

设置一个元素属性，用来动态第设置需要参加运算的键。如果属性名是以data-为前缀的，AngularJS会在生成传给连接函数的属性集合时移除这一前缀。也就是说data-list-property和list-property都会被表示为listProperty。

<div unordered-list="products" list-property="name"></div>
var data = scope[attrs['unorderedList']];
var propertyName = attrs['listProperty'];
if(angular.isArray(data)){
  var listElem = angular.element("<ul>");
  element.append(listElem);
  for(var i=0, len=data.length; i<len; i++){
    listElem.append( angular.element('<li>').text(data[i][propertyName]) );
  }
}

计算表达式

<div unordered-list="products" list-property="price | currency"></div>

添加过滤器后，自定义指令被破坏了。可以让作用域将属性值当做一个表达式进行计算。scope.$eval()接收两个参数：要计算的表达式和需要用于执行该计算的任意本地数据。

listElem.append( angular.element('<li>').text(scope.$eval(propertyName, data[i])) );

处理数据变化

<div class="panel-body">
  <button class="btn btn-primary" ng-click="incrementPrices()">
    Change Prices
  </button>
</div>
$scope.incrementPrices = function () {
  for(var i=0,len = $scope.products.length; i<len; i++){
    $scope.products[i].price++;
  }
}

添加监听器

if(angular.isArray(data)){
  var listElem = angular.element("<ul>");
  element.append(listElem);
  for(var i=0, len=data.length; i<len; i++){
    var itemElem = angular.element('<li>');
    listElem.append(itemElem);
    var watchFn = function (watchScope) {
      return watchScope.$eval(propertyName, data[i]);
    };
    scope.$watch(watchFn, function (newValue, oldValue) {
      itemElem.text(newValue);
    });
  }
}

第一个函数(监听器函数)基于作用域中的数据计算出一个值，该函数在每次作用域发生变化时都会被调用。如果该函数的返回值发生了变化，处理函数就会被调用，这个过程就像字符串表达式方式一样。提供一个函数来监听，能够从容地面对表达式中有可能带有过滤器的数据值得情形。

第二个监听器函数是针对$eval()计算的表达变化，来执行回调函数的。

以上代码并不能正确显示，涉及到for循环闭包问题。

for(var i=0, len=data.length; i<len; i++){
  (function () {
    var itemElem = angular.element('<li>');
    listElem.append(itemElem);
    var index = i;
    var watchFn = function (watchScope) {
      return watchScope.$eval(propertyName, data[index]);
    };
    scope.$watch(watchFn, function (newValue, oldValue) {
      itemElem.text(newValue);
    });
  }());
}

或者

(function (i) {
  var itemElem = angular.element('<li>');
  listElem.append(itemElem);
  var watchFn = function (watchScope) {
    return watchScope.$eval(propertyName, data[i]);
  };
  scope.$watch(watchFn, function (newValue, oldValue) {
    itemElem.text(newValue);
  });
})(i);

jqLite

jqLite中element()、append()等方法的参数是HTML string or DOMElement。

return function (scope, element, attrs) {
  var listElem = element.append("<ol>");
  for (var i = 0; i < scope.names.length; i++) {
    listElem.append("<li>").append("<span>").text(scope.names[i]);
  }
}

上述添加的是字符串，最后添加只有scope.names中最后一条信息。

return function (scope, element, attrs) {
  var listElem = angular.element("<ol>");
  element.append(listElem);
  for (var i = 0; i < scope.names.length; i++) {
    listElem.append(angular.element("<li>")
        .append(angular.element("<span>").text(scope.names[i])));
  }
}

以上是“Angular1.x自定义指令的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！

--结束END--

本文标题: Angular1.x自定义指令的示例分析

本文链接: https://lsjlt.com/news/73268.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Angular1.x自定义指令的示例分析
    小编给大家分享一下Angular1.x自定义指令的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体如下：调用Modul...
    99+
    2024-04-02
  • Angular1.x复杂指令的示例分析
    这篇文章主要介绍了Angular1.x复杂指令的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：名称描述compile指定一...
    99+
    2024-04-02
  • AngularJS自定义指令的示例分析
    这篇文章主要介绍AngularJS自定义指令的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！前言除了 AngularJS 内置的指令外，我们还可以创建自定义指令。 通过 .d...
    99+
    2024-04-02
  • Vue自定义指令的示例分析
    这篇文章主要介绍Vue自定义指令的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！在 AngularJs 中，它的指令使用 directive ( name,factor_fu...
    99+
    2024-04-02
  • Vue.directive自定义指令的示例分析
    这篇文章主要介绍Vue.directive自定义指令的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1.复习一下Vue自定义指令的代码，结果出现一个很无语的结果，先贴代码。2...
    99+
    2024-04-02
  • angular中自定义指令的示例分析
    这篇文章将为大家详细讲解有关angular中自定义指令的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。自定义属性的四种类别分为： 元素E，属性A，注释M，类C ,...
    99+
    2024-04-02
  • Angularjs中自定义指令的示例分析
    小编给大家分享一下Angularjs中自定义指令的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一：自定义指令常用模板下...
    99+
    2024-04-02
  • vue.js内部自定义指令与全局自定义指令的示例分析
    这篇文章将为大家详细讲解有关vue.js内部自定义指令与全局自定义指令的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。directive这个单词是我们写自定义指令...
    99+
    2024-04-02
  • Vue.js源码分析之自定义指令的示例分析
    这篇文章给大家分享的是有关Vue.js源码分析之自定义指令的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。前言除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令...
    99+
    2023-06-14
  • phpunit自定义的示例分析
    这篇文章主要介绍phpunit自定义的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！下载：wget  https://phar.phpunit.de/ph...
    99+
    2024-04-02
  • Angular4.x Event中DOM事件和自定义事件的示例分析
    这篇文章给大家分享的是有关Angular4.x Event中DOM事件和自定义事件的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。Angular组件和DOM元素通过事件与...
    99+
    2024-04-02
  • vue自定义指令directives及其常用钩子函数的示例分析
    这篇文章主要为大家分析了vue自定义指令directives及其常用钩子函数的示例分析的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟随小编一起来看看，下面跟着小编一起深入学习“vue自定义指令dire...
    99+
    2023-06-28
  • angular4自定义组件的示例分析
    这篇文章主要为大家展示了“angular4自定义组件的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“angular4自定义组件的示例分析”这篇文章吧。在...
    99+
    2024-04-02
  • CSS自定义属性的示例分析
    这篇文章主要为大家展示了“CSS自定义属性的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS自定义属性的示例分析”这篇文章吧。 兼容性 第一个问...
    99+
    2024-04-02
  • Vue3directive自定义指令内部实现示例
    目录directive-自定义指令（属于破坏性更新）Vue3指令的钩子函数在setup内定义局部指令生命周期钩子参数详解函数简写directive-自定义指令（属于破坏性更新） Vu...
    99+
    2022-12-15
    Vue3 directive自定义指令 Vue3 directive
  • Laravel自定义Make命令生成Service类的示例分析
    这篇文章主要介绍Laravel自定义Make命令生成Service类的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！Laravel 是什么Laravel 是一套简洁、优雅的PHP Web开发框架。它可以让你从...
    99+
    2023-06-15
  • Vue实现带参数的自定义指令示例
    正文 自定义指令参考官方文档：vuejs.bootcss.com/guide/custo… <!DOCTYPE html> <html lang="...
    99+
    2023-01-11
    Vue 带参数自定义指令 Vue 参数指令 Vue 自定义指令
  • docker中资源指标API及自定义指标API的示例分析
    这篇文章给大家分享的是有关docker中资源指标API及自定义指标API的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。    以前是用heapster来收集资源指标才能看，现在hea...
    99+
    2023-06-04
  • SQL Function自定义函数的示例分析
    小编给大家分享一下SQL Function自定义函数的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！目录产生背景（已经有了存储过程，为什么还要使用自定义函数）发展历史构成使用方法适...
    99+
    2024-04-02
  • H5自定义属性data-*的示例分析
    这篇文章主要为大家展示了“H5自定义属性data-*的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“H5自定义属性data-*的示例分析”这篇文章吧。 ...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作