Angular.js进阶
Posted foreverwaiting
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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进阶的主要内容，如果未能解决你的问题，请参考以下文章
“未捕获的类型错误：无法在 Websocket Angular JS 上读取未定义的属性‘延迟’”
我的C语言学习进阶之旅解决 Visual Studio 2019 报错：错误 C4996 ‘fscanf‘: This function or variable may be unsafe.(代码片段
我的C语言学习进阶之旅解决 Visual Studio 2019 报错：错误 C4996 ‘fscanf‘: This function or variable may be unsafe.(代码片段
我的Android进阶之旅关于Android平台获取文件的mime类型：为啥不传小写后缀名就获取不到mimeType？为啥android 4.4系统获取不到webp格式的mimeType呢？(代码片段