angularjs指令 | 易学教程

Angular directive 实例详解

阅读更多关于 Angular directive 实例详解

准备代码，会在实例中用到 var app = angular.module('app', []); angular指令定义大致如下 app.directive('directiveName', function() { return { // config } }) 其中return返回的配置对象包含很多参数，如下一一说明。 1. restrict 值为字符串，可选参数，指明指令在DOM中以什么形式被声明  <directiveName></directiveName>  <div directiveName="expression"></div>  <div class="directiveName"></div>   默认值为 restrict: 'EA' ，表示可以在DOM里面可以用元素形式和属性形式被声明。一般来说，如果你想创建一个自己模板的组件时，则使用元素形式，但是仅仅是为已有元素添加功能的话，就使用属性名。如果想要支持IE8，则最好使用属性和类形式来定义，另外从angular 1.3.X开始，已经放弃支持IE8了。 2.

angularjs 指令—— 绑定策略（@、=、&）

阅读更多关于 angularjs 指令—— 绑定策略（@、=、&）

angularjs 指令—— 绑定策略（@、=、&）引入主题背景：angular 的指令配置中的template可以直接使用硬编码写相应的代码，不过也可以根据变量，进行动态更新。那么需要用到那些变量，因用法的不同，所以需要设置合适的绑定策略。一、@ 绑定策略 @ 绑定策略，它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值。（指令属性的值可以使用表达式，但是得出来的值一定是字符串。） 1、上代码： html代码 <!DOCTYPE html> <html lang = "en" ng-app = "myApp" > <head> <meta charset = "UTF-8" > <title> myDirective </title> </head> <body> <input type = "text" ng-model = "myUrl" > <div my-directive my-url = "{{myUrl}}" my-link-text = "click me" ></div> ① </body> <script src = "../../common/angular-1.0.1.min.js" ></script> <script src = "./demo1.js" ></script> </html> js代码 angular .

Vue工作原理&实现双向绑定MVVM

阅读更多关于 Vue工作原理&实现双向绑定MVVM

Vue工作原理&实现双向绑定MVVM 本文能帮你做什么？ 1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自 vue源码 , 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助< 本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个本文最终实现的效果吧，和vue一样的语法，如果还不了解双向绑定，猛戳 Google <div id="mvvm-app"> <input type="text" v-model="word"> <p>{{word}}</p> <button v-on:click="sayHi">change model</button> </div> <script src="./js/observer.js"></script> <script src="./js/watcher.js"></script> <script src="./js/compile.js"></script> <script src="./js

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内置指令集合

ng-model 将表单控件和当前作用域的属性进行绑定代码如下: <input type="text" ng-model="someModel.someProperty" /><br> {{someModel.someProperty}} ng-init 该指令被调用时会初始化内部作用域。这个指令一般会出现在比较小的应用中，比如给个demo什么的... 代码如下: <div ng-init="job='fighter'"> I'm a/an {{job}} </div> 除了ng-init，我们还有更多更好的选择。 ng-app 每一次用AngularJS都离不开这个指令，顺便说下$rootScope。声明了ng-app的元素会成为$rootScope的起点，而$rootScope是作用域链的根，通常声明在<html>你懂的。也就是说根下的作用域都可以访问它。但是，不建议过度使用$rootScope，免得全局变量满天飞，效率又差又难管。下面是一个例子: 代码如下: <html ng-app="myApp"> <body> {{ someProperty }} </body> <script> var myApp = angular.module('myApp', []) .run(function($rootScope) { $rootScope

指令<AngularJs>

阅读更多关于指令

指令<AngularJs> 对于指令。能够把它简单的理解成在特定DOM元素上执行的函数，指令能够扩展这个元素的功能。首先来看个完整的參数演示样例再来具体的介绍各个參数的作用及使用方法： angular.module('myApp', []) .directive('myDirective', 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 or function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) { ... }, compile: // 返回一个对象或连接函数

Angular指令

阅读更多关于 Angular指令

一、指令基础指令 1、ng-disabled 使用ng-disabled可以把disabled属性绑定到以下表单输入字段上： <input> （ text、 checkbox、 radio、 number、 url , email 、 submit）； <textarea> ； <select> ； <button> 。案例1： <input type="text" ng-disabled="true" placeholder="TypetoEnable"> 在下面的例子，文本字段会被禁用五秒，直到在$timeout中将isDisabled属性设置为true： <textarea ng-disabled="isDisabled">Wait5seconds</textarea> angular.module('myApp', []) .run(function($rootScope, $timeout) { $rootScope.isDisabled = true; $timeout(function() { $rootScope.isDisabled = false; }, 5000); }); 2、ng-select 用来将数据同HTML的<select> 元素进行绑定。这个指令可以和ng-model 以及ng-options指令一同使用，构建精细且表现优良的动态表单。 3

理解Angular中的$apply()以及$digest() 【转】

阅读更多关于理解Angular中的$apply()以及$digest() 【转】

$apply()和$digest()在AngularJS中是两个核心概念，但是有时候它们又让人困惑。而为了了解AngularJS的工作方式，首先需要了解$apply()和$digest()是如何工作的。这篇文章旨在解释$apply()和$digest()是什么，以及在日常的编码中如何应用它们。探索$apply()和$digest() AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding)，这个特性大大简化了我们的代码编写方式。数据绑定意味着当View中有任何数据发生了变化，那么这个变化也会自动地反馈到scope的数据上，也即意味着scope模型会自动地更新。类似地，当scope模型发生变化时，view中的数据也会更新到最新的值。那么AngularJS是如何做到这一点的呢？当你写下表达式如{{ aModel }}时，AngularJS在幕后会为你在scope模型上设置一个watcher，它用来在数据发生变化的时候更新view。这里的watcher和你会在AngularJS中设置的watcher是一样的： $scope.$watch('aModel', function(newValue, oldValue) { //update the DOM with newValue}); 传入到$watch()中的第二个参数是一个回调函数

《AngularJS即学即用》有感（一）

阅读更多关于《AngularJS即学即用》有感（一）

1. MVC 　　MVC Model View Controller 模型-视图-控制器设计模式　　模型 - 负责数据、视图 - 负责展示UI界面、控制器 - 负责业务逻辑 2. Angular优点　　可复用、代码简洁、可使用第三方库，如 jQuery 3. 模块化　　包括：控制器、服务、指令 ng-app="myModule" // 初始化模块 4. 定义模块 angular.module("myModule",[]); // [] 依赖模块名称列表 5. 定义控制器　　通过控制器定义的变量可以在视图访问到 <!DOCTYPE html> <html ng-app="myModule"> <head> <meta charset = "utf-8"> <script src="js/angular.js"></script> </head> <body> <div ng-controller="myCtrlA"> <p>{{wordsA}}</p> </div> <div ng-controller="ctrlB as myCtrlB"> <p>{{myCtrlB.wordsB}}</p> </div> <script> angular.module("myModule",[]) .controller("myCtrlA",['$scope',function(

订阅 angularjs指令