angularjs自定义指令

Angularjs之directive指令学习笔记（二）

阅读更多关于 Angularjs之directive指令学习笔记（二）

1.Directive的五个实例知道driective作用、其中字段restrict、template、 replace、transclude、link用法参考文章链接地址： http://damoqiongqiu.iteye.com/blog/1917971 1.指令（directive）的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签 ,如同博客中的自定义的<hello>标签 2.directive中几个属性的介绍： ①restrict：表明指令的声明方式，选项E(元素Element)，A（属性Attribute），C（样式类Class），M（注释Comment） ②template/templateUrl:替换自定义元素的html的标签及内容 ③replace:true/false :决定自定义标签的显示及隐藏 ④transclude:true决定自定义标签内子标签的内容的显示处理,此时<hello>标签里的内容保持不变 ⑤link:一些事件需要绑定到某个元素上，那么你需要提供一个link函数 http://www.cnblogs.com/jimmychange/p/3498906.html compile：在directive中如果需要对DOM元素进行处理，基本都是在这个函数中进行。仔细看这个函数，compile并不能访问scope， link

AngularJS之指令

阅读更多关于 AngularJS之指令

紧接上篇博客“ 初探AngularJS ” 一、前言在AngularJS中指令尤为重要且内容庞多，固单独提炼出来，梳理一番。如有错误，请不吝讲解。好了，言归正传，让我们一起走进Angular指令的世界。在上篇博客的前言部分提到，Angular的核心就是对HTML标签的增强。我们用到的诸如ng-app、ng-controller等等这些都是属于Angular指令，具体点，它们为Angular内置的指令。 Angular不仅提供了内置指令，它还允许我们自定义指令，不然Angular就太low咯。这也是本篇博客的核心：如何自定义指令。该篇博客原文地址： http://www.cnblogs.com/giggle/p/5746220.html 二、自定义指令 Angular为我们提供了.directive()这个方法，来定义指令。如下：正如上述代码所示，directive方法接受两个参数：name和factory_function。　　--name嘛，即为指令的名字，供我们调用时使用；　　--factory_function就是当我们调用指令时，指令的实际行为，并且factory_function通常返回一个对象，里面通过规定的设置项来定义指令。那么自定义指令中，我们都可以操作哪些设置项呢？如下： var app = angular.module('myApp', [

AngularJs项目实践总结

阅读更多关于 AngularJs项目实践总结

今年3月接触AngularJs，并且在6月的项目中开始应用，从踩坑到填坑花了不少时间，根据项目中的实际应用情况总结了一些经验，如下：一．UI控件选择 Angularjs是不缺控件的，Github里现成的控件非常丰富，基本上足以应付一个普通管理系统中常见的控件需求。但是控件的丰富会带来选择的困难。选择控件要满足几个原则：原则1：符合业务场景原则2：控件持续更新原则3：满足性能要求举几个例子。首先是上传附件的控件。项目中要用到附件上传，谷歌上搜到了三个控件，分别是 https://github.com/leon/angular-upload https://github.com/danialfarid/ng-file-upload https://github.com/nervgh/angular-file-upload 因为项目需要兼容IE9，就重点关注了这三个控件对浏览器的兼容性。第一个控件没有任何说明，第二个控件支持IE9，但是前提是要安装flash，第三个控件支持IE8和9，但是只支持部分功能。从浏览器兼容性的角度考虑，最终选择了控件三。再举一个例子，下拉框控件。html原生的select功能比较单一，并且option的样式很难修改，在前端各个框架所用的下拉框基本上都是重新实现的。Angularjs也不例外。项目中刚开始选用了ui-select2。后来在ui

5个示例带你学习AngularJS

阅读更多关于 5个示例带你学习AngularJS

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 本文由伯乐在线 - 蝈蝈翻译自 tutorialzine 。欢迎加入技术翻译小组。转载请参见文章末尾处的要求。直到现在，你或许已经听说过 AngularJS 了，一个改变你对web应用思考方式，由谷歌开发的令人兴奋的开源框架。关于它的文章已经写得非常之多，但我发现还是要写些给那些更喜欢快速且实际例子的开发者。当今对web编程已经发生了改变。下面通过对5个实例的解释，你可以找到Angular应用的基本构建块，包括模型，视图，控制器，服务和过滤器，你可以在自己的浏览器中直接编辑。如果你更倾向于在你喜欢的代码编辑器中打开，那么请下载zip包。什么是 AngularJS？在高层次理解之上，AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架。当模型改变时，页面也能自动随之更新，反之亦然。当某个域的内容发生变化时，与之关联的模型也能更新。正因为Angular处理了所有的中间代码，所以你不用像jQuery那样，手动更新HTML或者事件监听。事实上，这里没有任何一个例子使用到了jQuery！如果要使用AnguarJS，你就得在<body>标签结束之前把它包含到你的页面里。这里推荐使用谷歌CDN ，相比来说，它有比较快速的加载时间： 1 2 3 <script src=

AngularJS：何时应该使用Directive、Controller、Service？

阅读更多关于 AngularJS：何时应该使用Directive、Controller、Service？

AngularJS：何时应该使用Directive、Controller、Service？ AngularJS是一款非常强大的前端 MVC框架。同时，它也引入了相当多的概念，这些概念我们可能不是太熟悉。（译者注：老外真谦虚，我大天朝的码农对这些概念那是相当熟悉啊！）这些概念有：Directive（指令） Controller（控制器） Service （服务）下面我们逐个来看这些概念，研究一下为什么它们会像当初设计的那样强大，同时研究一下为什么我们要以那样的方式去使用它们。我们从Service开始。 SERVICES（服务）如果你已经使用过 AngularJS ，你可能已经遇到过Service这个概念了，简而言之，Service就是【单例对象】在AngluarJS 中的一个别名。这些小东西（指单例对象）会被经常传来传去，保证你每次访问到的都是同一个实例，这一点和工厂模式不同。基于这种思想，单例对象让我们可以实现一些相当酷的功能，它可以让很多controller和directive访问内部的数值。在#angularjs 频道（译者注：指的是原作者自己的博客频道）里面这也是非常常见的问题之一，那就是在应用中的不同代码块之间如何共享数据？我们来看这个问题。我们首先来创建一个module（模块），本文中的所有代码都会用到这个module。 var module =

了解angularjs中的生命周期钩子函数$onInit，$onChange，$onDestory，$postLink

阅读更多关于了解angularjs中的生命周期钩子函数$onInit，$onChange，$onDestory，$postLink

壹 ❀ 引我在前面花了三篇文章用于介绍angularjs的指令directive，组件component，并专门花了一篇文章介绍directive与component的不同，其中提到在component的声明周期中需要配合钩子函数来实现组件部分功能，例如在bindings传值过程中，你得通过$onInit方法来初始化数据，那么我们就来好好聊聊component中常用的几个钩子函数，本文开始。贰 ❀ $onInit 在介绍component的文章中已经有涉及$onInit方法的说明，$onInit用于在component的controller中做数据初始化的操作。常理上来说，即便我们不通过$onInit为组件绑定数据也是没问题的，看个简单的例子： <div ng-controller="myCtrl"> <echo></echo> </div> angular.module('myApp', []) .controller('myCtrl', function ($scope) {}) .component('echo', { template: '<div>{{vm.name}}</div><button ng-click="vm.sayName()">点我</button>', controllerAs: 'vm', controller: function () {

angularJS表达式和指令

阅读更多关于 angularJS表达式和指令

主要是描述angularJS如何扩展html的：(模型后面会涉及) 例子1：通过指令来扩展html <body ng-app="myapp" >  　　<div ng-init="name='luna';age=30" >  　　　　姓名是：<span>{{name}}</span> 　　　　年龄是：<span>{{age}}</span>  　　　加法计算： <span> {{ 100 + 10000}} </span> 　　</div> 　　<div> 　　　　输入价格：<input type="text" ng-model="price" />  　　</div> </body> 这个示例子主要是描述了angular表达式和指令是如何使用在html中的。这些指令是angular跟视图能连接起来的唯一方式，做html设计的设计者可以专注于设计这些html模板。当然也可以自己定义一个指令：例子： var app = angular.module("myApp", []); app.directive("myDirective",

学习Angular1

阅读更多关于学习Angular1

教程：参考教程： https://www.runoob.com/angularjs/angularjs-tutorial.html 一.angular的简介 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中： <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 各个 angular.js 版本下载： https://github.com/angular/angular.js/releases AngularJS 扩展了 HTML AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。二.angular的表达式和指令 1.表达式 AngularJS 表达式写在双大括号内：{{ expression }} 相当于ng-bind 可以包含：文字、运算符和变量 eg:{{5+5}} AngularJS 表达式与

关于angularjs的一些看法

阅读更多关于关于angularjs的一些看法

angularjs真是一把利器，作为mvvm的一员，数据双向绑定，麻麻再也不用担心我怎么页面绑定和取数了。它的原理其实是解析dom，增加监听，实现几乎实时的数据双向绑定。作为入门，你应该要学会怎么绑定时间，添加控制器，如何在控制器外赋值及调用方法，会使用angularjs的自身的验证。作为进阶，我觉得你应该学会怎么自定义format和parse进行格式化操作。学会用指令封装第三方jquery插件。关于angularjs2，据说效率更高，但是使用了es6。对于能习惯并喜欢上.net的各种linq，lambda的语法糖，我却依然理解不了es6为什么会有这么蹩脚的语法习惯。如果你想用angularjs2，那你并不只是在学习一个新框架，更是在学习一门新语言。而且语法糖只所以能够被大多数人接受，首先是语句简明易懂，关键是IDE能够有友好的提示和智能感知。希望angularjs1和angularjs2也像jquery这样，而不是后者淘汰了前者。来源： oschina 链接： https://my.oschina.net/u/3069996/blog/792808

AngularJS简介

阅读更多关于 AngularJS简介

AngularJS简介 AngularJS是一个JavaScript矿建，他是一个JavaSscript编写的库。可以通过<script>标签添加到HTML页面。 AngularJS是通过指令扩展了HTML，且通过表达式绑定数据到HTML。地址：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 各个 angular.js 版本下载： https://github.com/angular/angular.js/releases AngularJS通过ng-directives扩展了HTML。 ng-app指令定义一个AngularJS应用程序。 ng-model指令把元素之（比如输入域的值）绑定到应用程序。 ng-model 指令也可以：为应用程序数据提供类型验证（number、email、required）。为应用程序数据提供状态（invalid、dirty、touched、error）。为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单 ng-bind 指令把应用程序数据绑定到 HTML 视图。 ng-init 指令初始化 AngularJS 应用程序变量。 ng-repeat 指令对于集合中（数组中）的每个项会

订阅 angularjs自定义指令