AngularJS中的DOM操作用法分析

本文实例讲述了AngularJS中的DOM操作用法。分享给大家供大家参考，具体如下：

在angular中使用第三方插件时最好都封装到指令（directives）中去，DOM操作也最好都解构到指令中。

避免使用 jQuery 来操作 DOM，包括增加元素节点，移除元素节点，获取元素内容，隐藏或显示元素。你应该使用 directives 来实现这些动作，有必要的话你还要编写自己的 directives。

如果你感到很难改变习惯，那么考虑从你的网页中移除 jQuery 吧。真的，AngularJS 中的 $http 服务非常强大，基本可以替代 jQuery 的 ajax 函数，而且 AngularJS 内嵌了 jQLite —— 它内部实现的一个 jQuery 子集，包含了常用的 jQuery DOM 操作方法，事件绑定等等。但这并不是说用了AngularJS 就不能用 jQuery 了。如果你的网页有载入 jQuery 那么 AngularJS 会优先采用你的 jQuery，否则它会 fall back 到 jQLite。

需要自己编写 directives 的情况通常是当你使用了第三方的 jQuery 插件。因为插件在 AngularJS 之外对表单值进行更改，并不能即时反应到 Model 中。例如我们用得比较多的 jQueryUI datepicker 插件，当你选中一个日期后，插件会将日期字符串填到 input 输入框中。View 改变了，却并没有更新 Model，因为 $('.datepicker').datepicker(); 这段代码不属于 AngularJS 的管理范围。我们需要编写一个directive 来让 DOM 的改变即时更新到 Model 里。

var directives = angular.module('directives', []);
directives.directive('datepicker', function() {
  return function(scope, element, attrs) {
    element.datepicker({
      inline: true,
      dateFormat: 'dd.mm.yy',
      onSelect: function(dateText) {
        var modelPath = $(this).attr('ng-model');
        putObject(modelPath, scope, dateText);
        scope.$apply();
      }
    });
  }
});

然后在 HTML 中引入这个 direcitve

<input type="text" datepicker ng-model="myObject.myDateValue" />

说白了 directive 就是在 HTML 里写自定义的标签属性，达到插件的作用。这种声明式的语法扩展了 HTML。

需要说明的是，有一个 AngularUI 项目提供了大量的 directive 给我们使用，包括 Bootstrap 框架中的插件以及基于 jQuery 的其他很热门的 UI 组件。还有http://www.ngnice.com 社区贡献的ngshowcase。 AngularJS 的社区很活跃，生态系统健全。

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • 详解angular中如何监控dom渲染完毕

    刚刚看到群上一个人说,他们公司凡是用angular和jquery插件一起用的人,都被解雇了,没看到这句话之前我很惭愧的说我有这样用过,其实angular的生态系统那么完善,完全可以不用去操作任何的dom元素都可以满足你的提倡开发需求. 那么如果真的需要用某个jquery插件,自己懒得封装angular插件或者懒得去找angular插件的时候,我们该怎么判断dom加载完毕. 有人说使用ng-init="" 亲测:表示没达到我想要的结果.... 当然你如果使用window.onload=f

  • AngularJS HTML DOM详解及示例代码

    AngularJS HTML DOM详解及示例代码

    以下指令可用于应用程序数据绑定到HTML DOM元素的属性. S.No. 名称 描述 1 ng-disabled 禁用一个给定的控制 2 ng-show 显示一个给定的控制 3 ng-hide 隐藏在给定的控制 4 ng-click 表示AngularJS click事件  ng-disabled 指令 添加ng-disabled属性到一个HTML按钮,通过它的模型.该模型绑定到复选框,看看以下变化. <input type="checkbox" ng-model="e

  • AngularJS 入门教程之HTML DOM实例详解

    AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bd

  • Angular.JS通过指令操作DOM的方法

    在指令而非在控制器中操作DOM 相信大家在页面处理中,难免会遇到操作DOM的情况,在AngularJS中,对DOM的操作是在指令而非控制器中完成的. AngularJS强调隔离的思想:把复杂的逻辑和操作放在指令或服务中,控制器作为视图和$scope之间的桥梁,仅仅用来存储数据模型. jqLite 为了便于DOM操作,AngularJS内部封装了angular.element,如果现有项目中已经引入的jQuery,angular.element相当于jQuery函数的别名,否则,angular.e

  • AngularJS实现DOM元素的显示与隐藏功能

    本文实例讲述了AngularJS实现DOM元素的显示与隐藏功能.分享给大家供大家参考,具体如下: DOM元素的显示与隐藏 ,是前端开发中常常会用到的功能,AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean. [HTML代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m

  • AngularJS中的DOM操作用法分析

    本文实例讲述了AngularJS中的DOM操作用法.分享给大家供大家参考,具体如下: 在angular中使用第三方插件时最好都封装到指令(directives)中去,DOM操作也最好都解构到指令中. 避免使用 jQuery 来操作 DOM,包括增加元素节点,移除元素节点,获取元素内容,隐藏或显示元素.你应该使用 directives 来实现这些动作,有必要的话你还要编写自己的 directives. 如果你感到很难改变习惯,那么考虑从你的网页中移除 jQuery 吧.真的,AngularJS 中

  • AngularJS中一般函数参数传递用法分析

    AngularJS中一般函数参数传递用法分析

    本文实例讲述了AngularJS中一般函数参数传递用法.分享给大家供大家参考,具体如下: 1. 模型参数 直接使用变量名,不要加引号 <!doctype html> <html ng-app="passAter"> <head> <meta charset="utf-8"/> </head> <body> <div ng-controller="passCtrl">

  • AngularJS中watch监听用法分析

    本文实例讲述了AngularJS中watch监听用法.分享给大家供大家参考,具体如下: ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); watchExpression 需要监控的表达式 listener 处理函数,函数参数如下  function

  • AngularJS中isolate scope的用法分析

    AngularJS中isolate scope的用法分析

    本文实例讲述了AngularJS中isolate scope的用法.分享给大家供大家参考,具体如下: angular js中指令directive有个特别有用的东西,那就是 isolate scope (被隔离的scope) 关于具体他和全局的scope 有什么区别,可以参考下面这篇文章: AngularJS 全局scope与Isolate scope通信用法示例 本文主要讲解 其具体的几种使用方式: 1. = 的使用 [html] <div class="card" ng-re

  • 详解jQuery中的DOM操作

    详解jQuery中的DOM操作

    大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li> <li title=

  • vue中插槽整理及用法分析

    本教程操作环境:windows7系统.vue2.9.6版,DELL G3电脑. vue的插槽(slot)主要分三种: 默认插槽,具名插槽,作用域插槽 vue中的插槽,指的是子组件中提供给父组件使用的一个占位符: 用标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML.组件等,填充的内容会替换掉子组件的标签(替换占位符). 默认插槽 默认插槽是最简单的一种插槽,和上面的描述一致,就是通过替换占位符达到在父组件中更改子组件中内容的效果. 语法: 在子组件中放置一个占位符(slot): <

  • Angular2学习教程之组件中的DOM操作详解

    前言 有时不得不面对一些需要在组件中直接操作DOM的情况,如我们的组件中存在大量的CheckBox,我们想获取到被选中的CheckBox,然而这些CheckBox是通过循环产生的,我们无法给每一个CheckBox指定一个ID,这个时候可以通过操作DOM来实现.angular API中包含有viewChild,contentChild等修饰符,这些修饰符可以返回模板中的DOM元素. 指令中的DOM操作 @Directive({ selector: 'p' }) export class TodoD

  • jQuery学习笔记[1] jQuery中的DOM操作

    DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM. 1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()...等方法. 例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName("form"); 2,HTML-DOM. 在使用JavaScript和DOM为HTML

  • react中的DOM操作实现

    目录 前面的话 使用场景 ref [HTML元素] [类组件] [函数式组件] [对父组件暴露DOM节点] 非受控组件 [默认值] ReactDOM [render()] [unmountComponentAtNode()] [findDOMNode()] 新ref 前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 1.处理焦点.文本选择或媒体控制

  • jQuery中DOM操作实例分析

    本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.

随机推荐