AngularJS路由 1.6版本 自定义指令作用域
2017-06-03 本文已影响0人
GodlinE
AngularJS 路由
路由就是监听锚点的变化
var app = angular.module('app',['ngRoute']);
//配置路由,注意中括号别忘记
app.config([‘$routeProvider’,function($routeProvider){
$routeProvider.when('/music/:id',{
templateUrl:'music_tpl.html',
//控制器名称要用引号包裹
controller:'musicController'
})
}])
app.controller('musicController',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
$http({
url:'musicList.php',
method:'get',
params:{
id:$routeParams.id
}
}).success(function(res){
$scope.dataList = res;
}).error(function(error){
console.log(error);
});
}])
AngularJS 1.6版本区别
-
请求数据返回结果时，能正确得到结果用
then(function(res){})，不能得到数据用catch(function(error){}) -
得到的结果
res是一个对象，不再是原来的一个数组所以需要res.data来调出里面的数据数组 -
在给标签设置
href属性的时候需要加前缀!
<a href='#!/music/1'>复古</a> -
1.6版本使用 jsonp 跨域时
//先配置白名单
app.config(['$sceDelegateProvider',function($sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist([
'self',
//当前文件代表所有文件 **所有文件夹下的所有文件
'https://api.douban.com/**'
]);
}]);
//使用 jsonp跨域时不再需要传入参数
app.controller('xmgController',['$scope','$http',function($scope,$http){
$http({
url:'https://api.douban.com/v2/book/1220562',
method:'jsonp'
}).then(function(){
}).catch(function(){
})
}])
自定义指令作用域
- scope 属性为
bool值时
var app = angular.module('app',[]);
app.controller('xmgController'
,['$scope',function($scope){
$scope.name = '我是父控制器 name‘；
}])
//每定义一个指令，都会有自己的作用域，默认情况下，指令当中的作用域与父作用域是同一个（$scope是同一个）
//可以指定 scope
// scope 值 可以是 Bool,为 true 代表的是独立作用域，第一次父作用域修改会影响子作用域，一旦子作用域修改过之后就会编程独立作用域
//互不影响，如果子作用域没有name 就会找父作用域
//默认情况就是 false ，使用的是同一个作用域 要改一起改
app.directive('xmg',function(){
return {
restrict:'EA',
template:"<h1>{{name}}</h1><input type='text' ng-model='name'>",
controller:function($scope){
}
}
})
<body ng-app="app" ng-controller="xmgController">
<input type="text" ng-model="name">
<hr>
<div xmg></div>
</body>
- scope 属性为
@时
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.name = "我是父控制器的name";
$scope.fatherAge = 'father传入的fatherAge';
$scope.add = "我是父控制器的add";
}]);
app.directive('xmg',function () {
return {
restrict:'EA',
template:'<input type="text" ng-model="age"><p>{{age}}</p><p>{{address}}</p>',
controller:function ($scope) {
$scope.name = "我是指令name";
},
//隔离作用域，没有也会不找父作用域。
//外界可以传递数据到指令内部作用域
//把要传递的数据写到{}里面
//1.当使用@修饰时，传递数据必须得要使用插值语法{{父控制器的属性}}
//<div xmg age="{{fatherAge}}" address="{{}}">
//2.@特点：父作用域修改，子作用域也会修改，子作用域修改，不会影响父作用域。
//属性的单向传递
scope:{
age:'@',
address:'@'
}
}
});
<body ng-app="app" ng-controller="xmgController">
<input type="text" ng-model="fatherAge">
<p>{{fatherAge}}</p>
<hr>
<div xmg age="{{fatherAge}}" address="{{add}}"></div>
</body>
- scope 属性为
=时
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope', function ($scope) {
$scope.name = "我是父控制器的name";
$scope.fatherAge = 'father传入的fatherAge';
$scope.add = "我是父控制器的add";
}]);
app.directive('xmg',function () {
return {
restrict:'EA',
template:'<input type="text" ng-model="age"><p>{{age}}</p><p>{{address}}</p>',
controller:function ($scope) {
$scope.name = "我是指令name";
},
//1.外界传递数据时不用使用插值语法 直接跟属性名称即可
//<div xmg age="父属性名称" address="父属性名称"></div>
//2.= 特点 父作用域改变，子作用随着改变。子作用域的改变也会影响到父作用的属性。
//属性的双向传递
scope:{
age:'=',
address:'='
}
}
});
<body ng-app="app" ng-controller="xmgController">
<input type="text" ng-model="fatherAge">
<p>{{fatherAge}}</p>
<hr>
<div xmg age="fatherAge" address="add"></div>
</body>
