angularjs自定义指令

angularJS中如何写自定义指令

阅读更多关于 angularJS中如何写自定义指令

指令定义 (转自http://www.cnblogs.com/huangshikun/p/7060787.html) 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能例如,ng-click可以让一个元素能够监听click事件,并在接收到事件的时候执行angularJS表达式正是指令使得angularJS这个框架变得强大,并且正如所见,我们可以自己创造新的指令指令声明方法 angular.module('freefedApp',[]).directive(name,function(){ return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function:function(tElement, tAttrs) (...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String orfunction(scope, element, attrs, transclude, otherInjectables) { ... },

angularJS 小记

阅读更多关于 angularJS 小记

刚刚接触angularJS，网上学习了一遍菜鸟教程（http://www.runoob.com/angularjs/angularjs-tutorial.html），做了些基础知识的笔记。 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 语法：双括号{{ …. }} 根元素 : ng-app=”” ：初始化应用程序初始化数据：ng-init:”a=4; b=5; ”(不常用) 字符串c=’alison’；对象：person={a:”1”,b:”2”} 数组：array={1,2,3} 显示数据：直接使用表达式{{ a+b }} 绑定数据：ng-bind=”a+b” (不常用) ng-model:”a+b” （3）循环元素 : ng-repeat: //放入列表 <div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'},

angularjs总览

阅读更多关于 angularjs总览

一、简介　　AngularJS是一个开发动态web应用的JavaScript框架，可以通过指令扩展HTML，通过表达式绑定数据到HTML。AngularJS可以构建单页应用。AngularJS主要有以下几个概念：模板、指令、模型、作用域、表达式、编译器、过滤器、视图、数据绑定、控制器、依赖注入、模块、服务。二、运行机制结合下面这个index.html讲解angualarJS的运行机制。　　1、浏览器加载html，并解析成DOM 　　2、加载angular.js的时候，会监听DOMContentLoaded事件，之后浏览器触发DOMContentLoaded事件　　3、AngularJS寻找ng-app指令，根据这个指令确定应用程序的边界，自动启动angularJS应用。没有ng-app则需要手动启动angularJS应用　　4、使用ng-app中指定的模块配置$injector 　　5、使用$injector依赖注入$compile服务和$rootScope 　　6、使用$compile服务编译模板成DOM并把它链接到$rootScope上　　7、ng-init指令对scope里面的变量name进行赋值　　8、对表达式{{name}}进行替换三、angularJS表达式　　AngularJS表达式与JavaScript表达式类似。可以包含数字，布尔值，字母

angularjs 指令详解 - template, restrict, replace

阅读更多关于 angularjs 指令详解 - template, restrict, replace

通过指令机制，angularjs 提供了一个强大的扩展系统，我们可以通过自定义指令来扩展自己的指令系统。怎样定义自己的指令呢？我们通过 Bootstrap UI 来学习吧。这个项目使用 angularjs 将 Bootstrap 3 进行了封装，是我们学习 angularjs 很好的样例。从 Alert 开始首先，我们从比较简单的 alert 指令来开始学习。在 Bootstrap 中，警告框使用类 alert 来表示, 通过 alert-success， alert-info， alert-warning, alert-danger 来表示不同类型的警告。 <div class="alert alert-success">...</div> <div class="alert alert-info">...</div> <div class="alert alert-warning">...</div> <div class="alert alert-danger">...</div> 对于可关闭的警告框来说，还可以用一个可选的.alert-dismissable和关闭按钮，但是，这是通过脚本来实现的，在 bootstrap ui 这里没有使用。 <div class="alert alert-warning alert-dismissable"> <button

前端框架AngularJS-基础详解

阅读更多关于前端框架AngularJS-基础详解

本次讲解的版本是AngularJS-1,最流行的可能还是AngularJS1吧 1.什么是AngularJS AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是： MVC、模块化、自动化双向数据绑定、依赖注入等等 2.MVC模式 Angular 遵循软件工程的 MVC 模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入(dependency injection），Angular 为客户端的 Web 应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的 Web 应用 Model:数据,其实就是 angular 变量($scope.XX); View: 数据的呈现,Html+Directive(指令); Controller:操作数据,就是 function,数据的增删改查; 3.双向绑定 AngularJS 是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统 HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此， AngularJS 使得对

AngularJS极速入门

阅读更多关于 AngularJS极速入门

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。 AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。 AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。 **1、什么是 AngularJS？** AngularJS是一个开源Web应用程序框架，AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。 AngularJS 把应用程序数据绑定到 HTML 元素。 AngularJS 可以克隆和重复 HTML 元素。 AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 HTML 元素"背后"添加代码。 AngularJS 支持输入验证。 **2、特性**

Angular学习-指令入门

阅读更多关于 Angular学习-指令入门

1.指令的定义从用户的角度来看，指令就是在应用的模板中使用的自定义HTML标签。指令可以很简单，也可以很复杂。AngularJS的HTML编译器会解析指令，增强模板的功能。也是组件化未来的发展趋势，目前HTML5中也加入了很多新标签，但是在实际业务开发过程中，有很多复用的模板，加上复用的交互效果，可以将其编写为AngularJS的指令，开发工程师可以在同一个项目，或多个项目中使用，实现开发一次，到处使用的目标。 2.内置指令和自定义指令 AngularJS内部指令都是ng-diretivename这种，以ng-开头。可以通过 https://docs.angularjs.org/api/ng/directive 查看AngularJS的指令。在实际开发中，常用的有以下几个： ngApp ngController ngClass ngClick ngShow和ng-hide ngRepeat ngSubmit 3.第一个指令编写一个第一个指令，输出Hello AngularJS Diretive. index.html <html ng-app="app"> <head> <title>AngularJs First Diretive</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com

Angular学习-指令入门

阅读更多关于 Angular学习-指令入门

angularJS 自定义指令分页

阅读更多关于 angularJS 自定义指令分页

原理和使用说明 1、插件源码主要基于angular directive来实现。 2、调用时关键地方是后台请求处理函数，也就是从后台取数据。 3、插件有两个关键参数currentPage、itemsPerPage，当前页码和每页的记录数。 4、实现方法调用后我们需要根据每次点击分页插件页码时重新提交后台来获取相应页码数据。在调用的页码中我使用了$watch来监控。我初次使用时是把调用函数放在了插件的onchange中，结果发现每次都会触发两次后台。这个地方需要注意。 5、我把请求后台封装成了Service层，然后在Controller里调用，也符合MVC思想。效果图调用代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 <div ng-app= "DemoApp" ng-controller= "DemoController" > <table class = "table table-striped" > <thead> <tr>

AngularJS介绍与脚手架

阅读更多关于 AngularJS介绍与脚手架

AngularJS 什么是AngularJS AngularJS：是一款由Google维护的开源JavaScript库使用AngularJS的优点：双向数据绑定代码模块化依赖注入，将这种后端语言的设计模式赋予前端代码，这意味着前端的代码可以提高重用性和灵活性，未来的模式可能将大量操作放在客户端，服务端只提供数据来源和其他客户端无法完成的操作 AngularJS指令 AngularJS 通过被称为指令的新属性来扩展 HTML。通过内置的指令来为应用添加功能。允许自定义指令。举例如下： < div ng - app = "" ng - init = "firstName='名字'" > < p > 在输入框中尝试输入 : < / p > < p > 姓名 : < input type = "text" ng - model = "firstName" > < / p > < p > 你输入的为 : { { firstName } } < / p > < / div > 数据绑定 AngularJS中通过ng-module实现数据绑定 click事件 < body > < div ng - app = "myApp" ng - controller = "myCtrl" > < button ng - click = "count = count + 1" > 点按钮加

订阅 angularjs自定义指令