AngularJS 笔记
2017-06-04 本文已影响0人
GodlinE
自定义指令 scope 的属性参数 &
var app = angular.module('app',[]);
app.controller('xmgController',['$scope',function($scope){
$scope.name = 'father-name';
$scope.fatherAge = 'father-age';
$scope.fatherMethod = function(){
alert('执行了父方法 fatherMethod');
}
}]);
app.directive('gxq',function(){
return {
restrict:'EA';
template:'<h1>{{name}}</h1><p ng-click = 'show()'>点我</p>'，
conteroller:function($scope){
},
scope:{
name:'@',
age:'=',
//要求外界传递信息（父方法进来）
show:'&'
}
}
});
<body ng-app="app" ng-controller="xmgController">
<input type='text' ng-model="name">
<h1>{{name}}</h1>
<input type ="text" ng-model ="fatherAge">
<h1>{{fatherAge}}</h1>
<hr>
<div gxq name="{{name}}" age="fatherAge" show="fatherMethod()"></div>
</body>
自定义指令中的 Link 属性
app.directive('gxq',function () {
return {
restrict:'EA',
template:'<div><h1 ng-click="hello()">hello</h1> <p ng-click="show()">点我</p></div>',
replace:true,
controller:function ($scope) { //一般都是处理业务逻辑
},
link:function ($scope,ele,attr) { //一般都是处理dom元素。
var res = attr.xmgShow;
if (res == 'false'){
ele.css({
'display':'none'
});
}
},
//scope:true //与父作用域是同一个
scope:{
show:'&', //1.show="父方法名称（）"
hello:'&'
}
}
});
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
<button ng-click="fatherMothod()">父点击</button>
<hr>
<!--<div gxq show="fatherMothod()" hello="fatherHello()"></div>-->
<gxq xmg-show="true"></gxq>
</body>
jQLite 对象
- AngularJS 中包含了一部分 jQuery 功能
- 如果说已经引入了 jquery 那么使用
angular.element(box);获取的对象就是一个原生 jquery 对象 - 要想使用 jquery 的全部方法需要先引用 jquery 文件 然后引用 angularjs 文件
var box = document.querySelector('.box');
var btn = document.querySelector('.btn');
box = angular.element(box);
btn = angular.element(btn);
box.css({
width:'100px',
height:'100px',
background:'red'
})
//无效果，angular内封装的 jquery 没有这个方法
btn.on('click',function(){
box.animate({
width:'300px',
height:'300px'
})
})
$watch 监听
<script src="angular1.6.js"></script>
<script>
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.name = 'xmg';
//$watch('scop身上的属性',fun(newV,oldV))
//当属性值改变时，会自动调用回调方法。newV:改过之后最新的值。oldV:修改之前的值。
/*$scope.$watch('per.name',function (newV,oldV) {
console.log(newV+'-----'+oldV);
});*/
//默认情况下是不能直接监听对象。
//如果想要监听一个对象，加上第三个参数true 为true可以监听对象的变化。
//$watch很浪费性能。
/*$scope.$watch('per',function (newV,oldV) {
console.log(newV+'-----'+oldV);
},true);*/
//如何取消一个watch监听。
//在调用$watch会返回一个方法。想要取消监听，直接执行返回的方法 即可。
var count = 3;
var unWatch = $scope.$watch('per.name',function (newV,oldV) {
console.log(newV+'-----'+oldV);
count--;
if (count == 0){
unWatch();//取消监听。
}
},true);
}]);
//3.绑定模块
//4.绑定控制器
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
<input type="text" ng-model="per.name">
<input type="text" ng-model="per.age">
<h1>{{per.name}}</h1>
<h1>{{per.age}}</h1>
</body>
$q 可以理解为 条件执行
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope','$http','$q', function ($scope,$http,$q) {
var defer = $q.defer();
$http({
url:'url',
method:'get',
}).then(function (res) {
defer.resolve(res);
}).catch(function (error) {
defer.reject(error);
});
defer.promise.then(function (res) {
//resolve
alert(res);
},function (error) {
//reject
alert('error'+error);
}).finally(function () {
//finally一定会执行。
alert('fin');
});
}]);
