1.相关地址： 插件下载：https://github.com/fatlinesofcode/ngDraggable/blob/master/ngDraggable.js 2.讲解 <div ng-drop="true" ng-drop-success="dropComplete($index,$data,$event)" ng-repeat="item in content"><li ng-drag="true" ng-drag-data="item" >姓名：{{item.name}}，年龄：{{item.age}}</li> </div>ng-drag : 表示该元素能够被拖动 ng-drag-data : 表示拖动元素时跟着被拖走的数据 ng-drop : 表示该元素内可放置被...
本文实例讲述了AngularJS路由用法。分享给大家供大家参考，具体如下： 目前的理解中，这个NG的路由模块可以用于带有多视图的单页面开发。 先把所有代码贴出： HTML: <!doctype html> <meta charset="UTF-8"> <html> <head><link href="self.css" rel="external nofollow" rel="stylesheet"> </head> <body ng-app=routingDemoApp> <h2>AngularJS 路由应用</h2> <ul><li><a href="#/" rel="external nofollow" >首页</a></li><li><a...
本文实例讲述了AngularJS路由Ui-router模块用法。分享给大家供大家参考，具体如下： 由于某些设计原因，AngularJS原生的路由模块有一些缺点，比如说不支持view的嵌套等，所以有许多社区开始自己设计路由模块，最有代表性的就是ui-route了。 ui-route是一个功能强大的路由模块，它在原生的ng-route模块上加强了其他方面的功能。 现在就开始做几个DEMO接触一下ui-route。 <!--初始页面--> <!doctype html> <meta charset="UTF-8"> <h...
Angular指令 定义一个指令的方法非常简单，只需要调用`directive`方法即可: var app=angular.module(myapp,[]);app.directive(name,fn)1. 基础指令var app=angular.module(myapp,[]);app.run(function($templateCache){$templateCache.put(cache,<h3>模板内容来源于缓存</h3>)});app.directive(tsHello,function(){return{restrict:EAC,template:<h3>Hello,directive</h3>}})app.directive(tsTplfile,function(){return{restrict:E...
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件) 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html(). 但是,出于安全考虑,如果我们直接使用ng-bind-html是会报错的,ng-bind-html后面的...
对于angular2中的Input和Output可以和AngularJS中指令作类比。 Input相当于指令的值绑定，无论是单向的(@)还是双向的(=)。都是将父作用域的值“输入”到子作用域中，然后子作用域进行相关处理。 Output相当于指令的方法绑定，子作用域触发事件执行响应函数，而响应函数方法体则位于父作用域中，相当于将事件“输出到”父作用域中，在父作用域中处理。 看个angular2示例吧，我们定义一个子组件，获取父作用域的数组值并以列表形式显...
NgIf 指令作用ngIf 指令用于根据表达式的值，在指定位置渲染 then 或 else 模板的内容。 then 模板除非绑定到不同的值，否则默认是 ngIf 指令关联的内联模板。else 模板除非绑定对应的值，否则默认是 null。NgIf 指令语法简单形式<!--语法糖--> <div *ngIf="condition">...</div> <!--Angular 2.x中使用template--> <ng-template [ngIf]="condition"><div>...</div></ng-template>使用else块<div *ngIf="condition; else elseBlock...
本文实例讲述了AngularJS中的promise用法。分享给大家供大家参考，具体如下： JavaScript异步回调有好处也有坏处，回调函数大量嵌套十分复杂．所以javascript中还有另一种异步处理模式叫promises．在AngularJS中的实现就是$q服务． 下面是一些小例子． then,catch,finally 在链最后的 catch 为整个链式处理提供一个异常处理点 在链最后的 finally 总是会被执行，不管 promise 被处理或者被拒绝，起清理作用 <!DOCTYPE html> <html>...
本文实例讲述了angular.fromJson与toJson方法用法。分享给大家供大家参考，具体如下： AngularJS的angular.fromJson()方法可以把一个Json字符串中解析成一个对象，或对象数组： <!DOCTYPE html> <html ng-app="App"> <head><meta charset="UTF-8"><title></title><script src="../js/angular.js"></script><script type="text/javascript">angular.module("App", []).controller("parseController", function($scope){$scope.parse...
本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： 一、设置默认值： 现在有三个学生小明，小红，小黑，对双向绑定的student设置你想要的select值就可以在下拉框默认选中 code1： 设置”请选择”为默认项，只需要把变量student设置为‘，即可默认到“请选择”，需要注意的是 <option value="">请选择</option>使用的是value（这是HTML原生的属性） <option ...
前言 大家在平时的项目开发中，应该会经常遇到上图所示的需求，就是在一个页面中有多个标签，被选中的标签颜色会高亮显示，切换不同标签显示相应的不同内容。如果内容代码过多则写在同一个html文件就会显得特别乱，所以这里我们最好把页面代码分开单独管理，controller也可以分开来管理，这样就会显得清楚的多。 这里就要使用到Angularjs中个ng-include指令。下面来看看详细的介绍： 一、多标签的编写 首先需要了解需求： 1....
ng-route模块中的when()和ui-route的state()都提供了resolve属性。 为什么需要使用resolve？ 当路由切换的时候，被路由的页面中的元素（标签）就会立马显示出来，同时，数据会被准备好并呈现出来。但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，而后再呈现出数据。这样就会导致页面会被渲染两遍，导致“页面UI抖动”的问题，对用户不太友好。resolve的出现解决了这个问题。 resolve是干嘛...
项目筹备近期开启Angular学习，指令比较难理解所以记录备案，推荐视频大漠穷秋 Angular实战 由于篇幅过长,列举大纲如下：一、指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性。不同于jQuery，Angular设计核心思想是通过数据与模板的绑定，摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="my...
ng-repeat-start与ng-repeat-end时AngularJS（1.2.x）扩展的，使用这两个指令可以灵活控制遍历形式。 例如： index.html <div class="uk-panel" ng-controller="UserCtrl"><ul class="uk-list uk-list-striped"><li ng-repeat-start="user in users">{{user.name}}</li><li ng-repeat-end>{{user.email}}</li></ul></div>index.js var myApp = angular.module(myApp, []);myApp.controller(UserCtrl, [$scope, function($scope){$s...
前言 html中的属性很多，同样可以使用angularjs来定义： ng-attr-(suffix)=只能使用变量定义<div title="angularjs中的title">title</div> <div ng-attr-title="angularjs中的title">title</div><!--这样写显示不出来标题--> <div ng-attr-title="angularjs中的title">title</div><!--这样写显示不出来标题--> <div ng-attr-title="{{titleStr}}">title</div><!--只能使用变量定义--> angular.module(myApp,[]).controller(myCtrl,...