Angular.js进阶
1.常用指令
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/foundation.min.css">
<style>
.tx{
width: 50px;
height: 50px;
margin-bottom: 10px;
margin-left: 80px;
}
</style>
</head>
<!--ng-bind,{{}},ng-model,ng-show/hide,ng-if,ng-checked,ng-src-->
<!--ng-href,ng-class,ng-selected,ng-submit,ng-disable,ng-change-->
<body style="padding:10px" ng-app="app">
<div ng-controller="UserCtrl">
<form name="f" ng-submit="register(user)">
<fieldset>
<legend>基本信息</legend>
<img ng-src="{{user.icon}}"
ng-class="{'tx':user.showicon}"/>
<!--ng-hide="user.isShowImg"-->
<!--ng-show="user.isShowImg"-->
<!--ng-if="user.isShowImg"-->
<div>
<input type="text" ng-model="user.uname" placeholder="用户名" required />
<input type="password" placeholder="密码"/>
职位：<select>
<option value="">--请选择--</option>
<option value="1" ng-selected="user.zw=='1'">Java工程师</option>
<option value="2" ng-selected="user.zw=='2'">web工程师</option>
</select>
性别：<input type="radio"
ng-checked="user.sex=='1'"
name="sex"> 男
<input type="radio"
ng-checked="user.sex=='0'"
name="sex"> 女
</div>
</fieldset>
<fieldset>
<legend>爱好</legend>
<div>
<input type="checkbox" ng-checked="isChecked(1)" name="爱好"> 篮球
<input type="checkbox" ng-checked="isChecked(2)" name="爱好"> 足球
<input type="checkbox" ng-checked="isChecked(3)" name="爱好"> 排球
</div>
</fieldset>
<button type="submit"
ng-disabled="f.$invalid"
class="button expand">提交</button>
</form>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('UserCtrl',function($scope){
$scope.user={
isShowImg:true,
showicon:true,
icon:"images/demo.jpg",
uname:"",
pwd:"",
zw:"2",
sex:"1",
aihao:[1,3]
};
$scope.isChecked=function(n){
var isok=false;
for(var i=0;i<$scope.user.aihao.length;i++){
if(n==$scope.user.aihao[i]){
isok=true;
break;
}
}
return isok;
};
$scope.register=function(u){
console.log(u);
}
}); </script>
</html>
2.angular与element（1）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body>
<div ng-app="app">
<div enter leave>我在这</div>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
app.directive('enter',function(){
return function(scope,element,attrs){
element.bind('mouseenter',function(){
element.addClass('alert-box');
})
}
});
app.directive('leave',function(){
return function(scope,element,attrs){
element.bind('mouseleave',function(){
element.removeClass('alert-box');
})
}
});
</script>
</html>
angular与element（2）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div ng-app="app">
<hello></hello>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
app.directive('hello',function(){
return {
restrict:"E",
template:'<div><input ng-model="txt"></div><div>{{txt}}</div>',
link:function(scope,element){
scope.$watch('txt',function(newVal){//监听
if(newVal==='error'){
element.addClass('alert-box alert')
}
})
}
}
});
</script>
</html>
3.自定义HTML组件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<p>p:restrict含义(A属性，E标签元素（结合template插入），C类名)与应用，replace使用，template使用</p>
<div ng-app="app">
<div hello class="leiming"></div>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
app.directive('hello',function(){
// return {
// restrict:'E',//自定义HTML标签，在dom中显示标签名为hello
// replace:true,//默认false，替换掉自定义的directive名称，即把hello替换为div
// template:'<div>hello Angularjs</div>'
// };
return {
restrict:'A',
link:function(){
alert("我是属性")
}
};
});
app.directive('leiming',function(){
return {
restrict:'C',
link:function(){
alert("我是类名")
}
};
});
</script>
</html>
4.directive与controller
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<p>controller属性使用，link使用，directive中调用controller的方法</p>-->
<div ng-app="app">
<!--<div ng-controller="AppCtrl">-->
<!--<div enter="loadMoreData()">加载数据</div>-->
<!--</div>-->
<food apple orange banana>所有食物</food>
<food apple banana>所有食物</food>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module('app',[]);
//app.controller('AppCtrl',function($scope){
// $scope.loadMoreData=function(){
// alert("正在加载数据...")
// };
// $scope.delData=function(){
// alert("正在删除数据...")
// }
//});
//app.directive('enter',function(){
// return function(scope,element,attrs){
// element.bind('mouseenter',function(){
// //scope.loadMoreData();
// //scope.$apply('loadMoreData()');
// scope.$apply(attrs.enter);
// })
// }
//});
app.directive('food',function(){
return {
restrict:'E',
scope:{},
controller:function($scope){
$scope.foods=[];
this.addApple=function(){
$scope.foods.push('Apple');
};
this.addOrange=function(){
$scope.foods.push('Orange');
};
this.addBanana=function(){
$scope.foods.push('Banana');
}
},
link:function(scope,element,attrs){
element.bind('mouseenter',function(){
console.log(scope.foods);
});
}
}
});
app.directive('apple',function(){
return {
require:'food',
link:function(scope,element,attrs,foodCtrl){
foodCtrl.addApple();
}
}
});
app.directive('orange',function(){
return {
require:'food',
link:function(scope,element,attrs,foodCtrl){
foodCtrl.addOrange();
}
}
});
app.directive('banana',function(){
return {
require:'food',
link:function(scope,element,attrs,foodCtrl){
foodCtrl.addBanana();
}
}
});
</script>
</html>
Angular.js进阶的更多相关文章
- AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...
- (翻译)Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- angular.js写法不规范导致错误
以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...
- Angular.js实现折叠按钮的经典指令.
var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...
- Angular.js通过bootstrap实现经典的表单提交
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...
随机推荐
- MARS3.6 Programming
An Assembly Language I.D.E. To Engage Students Of All Levels * A Tutorial *2007 CCSC: Central Plains ...
- idea打jar包
昨天碰到个问题:使用idea打成jar包,但是在测试环境一直报错.参考: http://blog.csdn.net/aotian16/article/details/52198378 之后发现原来的j ...
- 记重回IT行业的面试
问点: 0,梳理一个前端知识框架 1,jQuery的理解 2,仿某网站首页,除了download,显示新优化地方 3,文档模型(DOM) 事件流 事件处理程序 事件类型 例如阻止冒泡的方法 4,前端跟 ...
- 【NLP_Stanford课堂】文本分类1
文本分类实例:分辨垃圾邮件.文章作者识别.作者性别识别.电影评论情感识别(积极或消极).文章主题识别及任何可分类的任务. 一.文本分类问题定义: 输入: 一个文本d 一个固定的类别集合C={c1,c2 ...
- asp.net mvc 4.0常见的几个问题
看书的时候遇到很多不知所云的错误,都是在网上找到的解决方法,没办法,从asp.net到mcv很多的新技术,没有一点思路,只能在网上搜罗了. 1.更新产品不成功 更新产品的时候一直不能更新成功,但是很奇 ...
- NET Core Web API下事件驱动型架构CQRS架构中聚合与聚合根的实现
NET Core Web API下事件驱动型架构在前面两篇文章中,我详细介绍了基本事件系统的实现,包括事件派发和订阅.通过事件处理器执行上下文来解决对象生命周期问题,以及一个基于RabbitMQ的事件 ...
- Alpha Scrum1
Alpha Scrum1 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:音乐网页前端页面编写,博客发布 吴沂章:博客编写 林锃寒:前端页面编写 ...
- libevent-signal(1)
现在已经知道,libevent有三种事件类型,分别是时钟事件,信号事件,i/o事件.今天就分析一下信号事件,下面是一个简单的信号事件demo #include <sys/types.h> ...
- MySQL语法二：数据操纵语句
数据操纵语句DML(SELECT,DELETE,UPDATE,INSERT) 一. 数据操纵语句是对数据表中的内容进行操作.比如对某个表中的某条记录或者多条记录进行增删改查操作. 一).查询 SELE ...
- CUDA 深入浅出谈[转]
CUDA 深入浅出谈 “CUDA 是 NVIDIA 的 GPGPU 模型,它使用 C 语言为基础,可以直接以大多数人熟悉的 C 语言,写出在显示芯片上执行的程序,而不需要去学习特定 ...