更多内容 ! 请移步本人博客 ! 点击跳转
控制器作用域
- 控制器和函数一样,也有自己的作用域.类似函数,作用域范围内先自己自身找,自己有就用自己的,自己没有的话会向上查找,找父控制器.
- 子级可以访问父级元素,父级元素不能访问子级元素
- 每个控制器(controller)都对应一个模型(Model),也就是($scope)对象,不同层级控制器下的$scope便产生了作用域.
- 模块之间是不可以嵌套使用的
- 但是控制器之间是可以嵌套使用的
- 使用ng-init 定义全局作用域。范围是整个模块。
$rootScope - 示例代码: 函数作用域
<script>
var a = 10;
function test() {
var a = 20;
var b = 10;
}
//alert(a);
test();
//子级可以访问父级的作用域。
//父级不能访问子级的作用域。
</script>
- 示例代码:控制器作用域
// 全局作用域也就是根作用域
<body ng-app="app" ng-init="name='eee'">
<div ng-controller="appController1">
<div>{{name}}</div>
</div>
<div ng-controller="appController2">
<div>{{name}}</div>
</div>
<script type="text/javascript" src="../js/angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('appController1',['$scope',function ($scope) {
// 输出eee
}]);
app.controller('appController2',['$scope',function ($scope) {
// 输出eee
}]);
</script>
</body>
自定义指令
-
AngularJs允许根据实际业务需要自定义指令,通过angular全局对象下的directive方法实现
-
示例代码 :
<body ng-app="app" ng-controller="appController">
<ele>
<ul>
<li>我是transclude1</li>
<li>我是transclude2</li>
<li>我是transclude3</li>
<li>我是transclude4</li>
<li>我是transclude5</li>
</ul>
</ele>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('appController', ['$scope', function ($scope) {
}]);
// 第一个参数:指令名称
// 第二个参数:回调函数
app.directive('ele', function () {
return {
// E:代表元素 A:代表属性 C:当做类
restrict: 'EAC', // 以哪一种形式出现
template: "<div><h1>自定义指令</h1> <p>p标签</p> <div>232222222</div></div>",
replace: true, //是否替换原标签
//如果要替换整个标签 需要一个大标签把自定义的标签包裹起来
transclude: false // 是否保留原标签的内容
}
});
</script>
</body>
- 模版命令
- 示例代码 :
// 上面的代码都一样 就是需要自定义一个html文件,然后引入 方便管理
app.directive('ele', function () {
return {
// E:代表元素 A:代表属性 C:当做类
restrict: 'EA', // 以哪一种形式出现
templateUrl: "./ele.html",
replace: true, //是否替换原标签
transclude: true // 是否保留原标签的内容
}
});
过滤器
-
AngularJs内置9个过滤器
-
过滤器的本质就是函数
-
管道符 上次的结果作为下一次的参数传递
-
**示例代码 : **
<!--
1.currency默认是美元符号 也可以自定义符号
currency:将数值转化为货币格式
-->
<p>{{price | currency:'¥'}}</p>
<!--
2.日期格式化 年(y) 月(M) 日(d) 星期(EEEE/EEE) 时(H/h) 分(mm) 秒(ss) 毫秒(sss)
-->
<p>{{dateTime | date:'yyyy-MM-dd hh:mm:ss'}}</p>
<!--
3.filter:在给定数组中选择满足条件的一个子集,并返回一个新数组,其条件可以是字符串\对象\函数
-->
<p>{{course | filter:'j'}}</p>
<!--
4.limitTo:取出字符串或者数组的的前几位(正数)或者后几位(负数)
-->
<p>{{course | limitTo:-2}}</p>
<!--
5.uppercase:把文本转换成大写
lowercase: 把文本转成小写
-->
<p>{{name | uppercase | lowercase}}</p>
<!--
6.numStr:在number当中不能出现非数字
-->
<p>{{numStr | number:4}}</p>
<!--
7.orderBy:排序true降序 false升序
-->
<p>{{scores | orderBy:'':false}}</p>
<p>{{scores | orderBy:'score':true}}</p>
<!--
8.取出所有的数据
-->
<p>{{stus}}</p>
<!--
9.json 也是取出数据
-->
<p>{{stus | json}}</p>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('appController', ['$scope', function ($scope) {
// price
$scope.price = "18";
// 日期
$scope.dateTime = new Date();
// 数组
$scope.course = ['ios','html','java','ui'];
$scope.course = [100,30,40,20,4];
// 大小写转化
$scope.name = 'LENG'
/* 实现原理
* parseInt() 直到遇到非数字才停止
* number:里面不允许出非数字。
* */
$scope.numStr = '18';
// 排序
$scope.scores = [100,30,40,20,4];
$scope.stus = [
{name:'zs',score:20},
{name:'wc',score:90},
{name:'ls',score:59}
]
}]);
</script>
自定义过滤器
-
AngularJs内置过滤器外,还可以根据业务需要自定义过滤器
-
通过模块对象实例提供的filter方法自定义过滤器
-
**示例代码 : **
<body ng-app="app" ng-controller="appController">
<p>{{price | eFilter:'eFilter'}}</p>
<!-- 需求:把第一个字符变成大写 -->
<p>{{name | eeUppercase}}</p>
<p>{{price | eeCurrent : '&'}}</p>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('appController', ['$scope', function ($scope) {
$scope.price = '18.8';
$scope.name = 'ee';
}]);
// 自定义指令
app.directive('ee', function () {
return {
restrict: "ECA",
template: "<h1>ee</h1>",
replace: true
}
});
/*过滤器的本质就是一个function
* 第一个参数:过滤器的名称 第二个参数:回调函数
* input 就是管道符前面执行的结果
* 返回值为一个函数
* */
app.filter('eFilter', function () {
return function (input, args) {
console.log(input + args);
}
});
angular.module('app').filter('eeUppercase',function () {
return function (input) {
var str = input[0].toUpperCase() + input.slice(1);
return str;
}
});
app.filter('eeCurrent',function () {
return function (input, args) {
if(args){
return args + input;
}
else {
return + '$' + input;
}
}
});
// 打印结果 Ee &18.8
</script>
</body>
依赖注入
- AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用这导致了使用者和被使用者之间存在依赖关系。
- 所谓依赖注入是指在运行时自动查找依赖关系
- 然后将查找到依赖传递给使用者的一种机制。
依赖注入为分两种:
-
行内式注入
以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数
推荐使用行内式注入. -
推断式注入
没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称
这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。 -
**示例代码 : **
<body ng-app="app" ng-controller="xiController">
<h1>{{name}}</h1>
<script src="../js/angular.js"></script>
<script>
/*
* 1.什么是服务？
* 服务就是angular内置的一些功能。直接拿到该功能做一些事情。
* 2.依赖注入？
* 模块当中依赖系统的哪些功能（用到系统->angular默认的哪些功能）
* 查找该功能，找到之后， 系统会对应的功能，传递给指定的模块。这个过程，依赖注入。
* 行内式注入
* 推断式注入
* */
var app = angular.module('app',[]);
// 行内式注入 -- 推荐使用行内式注入
app.controller('appController',['$scope',function ($scope) {
$scope.name = '行内式注入';
}]);
// 推断式注入 -- 当代码被压缩时 参数就不会被找到
app.controller('xiController',function ($scope) {
$scope.name = '推断式注入'
});
</script>
</body>
$location服务
-
服务就angular内置的功能
-
它的本质就是一个对象或函数
-
$location是对原生Javascript中location对象属性和方法的封装。
-
**示例代码 : **
<body ng-app="app" ng-controller="appController">
<!--
https://www.baidu.com/?tn=93912046_hao_pg
https:协议
主机地址:www.baidu.com 192.52.6.74
端口号：63342/8080
/code/06-$location服务.html :文件路径
？name=xmg&age=10 : 传递的参数
#/test/ 锚点 hash值。
-->
<p>{{name}}</p>
<p>{{absUrl}}</p>
<p>{{hostName}}</p>
<p>{{url}}</p>
<p>{{search}}</p>
<script>
// js原生网络地址
for (var key in location) {
console.log(key + '------' + location[key]);
}
</script>
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('appController', ['$scope', '$location', function ($scope, $location) {
$scope.name = 'xibalu';
// 获取当前地址
$scope.absUrl = $location.absUrl();
// 获取主机名
$scope.hostName = $location.host();
// 获取锚点后面的地址
$scope.url = $location.url();
// 获得第二个锚点之后的地址
$scope.hash = $location.hash();
// 单页面应用程序 锚点搜索
$scope.search = $location.search();
}]);
</script>
</body>
定时器服务
-
$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
-
**示例代码 : **
<body ng-app="app" ng-controller="appController">
<p>{{name}}</p>
<p>{{timeDate | date:'yyyy-MM-dd hh:mm:ss'}}</p>
<input type="button" value="点击停止" ng-click="stop()">
<script src="../js/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('appController', ['$scope', '$timeout', '$interval', function ($scope, $timeout, $interval) {
// 一次定时器
$timeout(function () {
$scope.name = 'xiba';
}, 2000);
// 多次定时器
var timer = $interval(function () {
$scope.timeDate = new Date();
},1000);
/*如何停止定时器
* 通过变量保存。
* $interval.cancel(timer);
* */
$scope.stop = function () {
$interval.cancel(timer);
}
}]);
</script>
</body>
网友评论