angularJS系列:基础篇
[ 2017/05/11, AngularJS , 3634阅, 1评 ]

1.日期格式化

13位时间戳(毫秒为单位的直接格式化)

{{1423130269432 | date:'yyyy-MM-dd HH:mm:ss'}}

10位时间戳(秒为单位的需要×1000转为毫秒再格式化)

{{1438668006*1000 | date:'yyyy-MM-dd HH:mm:ss'}}

2.截取字符串

在HTML的模板绑定中:{{ limitTo_expression | limitTo : limit : begin}}
   In JavaScript:$filter('limitTo')(input, limit, begin) 

栗子:

{{"2017-01-20 15:16:30" | limitTo:10}}结果为:2017-01-20

填写负值为从后往前截取{{"2017-01-20 15:16:30" | limitTo:-8}}结果为:15:16:30

begin参数用于控制从哪里开始截取{{"2017-01-20 15:16:30" | limitTo:5:5}}结果为:01-20

3.$window

a.刷新:$window.location.reload();

b.弹窗:$window.alert("hello C");

4.$location

a.跳转:$location.path("/index");

5.ng-bind-html 指令

ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。
当你想让 AngularJS 在你的应用中写入 HTML,你就需要去检测一些危险代码。通过在应用中引入 "angular-santize.js" 模块,使用 ngSanitize 函数来检测代码的安全性。 in your application you can do so by running the HTML code through the ngSanitize function.

语法:

<element ng-bind-html="expression"></element>

栗子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.js/angular.min.js"></script>
<script src="angular.js/angular-sanitize.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>
<p><b>注意:</b> 该实例包含了 "angular-sanitize.js" 文件,
该文件移除 HTML 中的危险代码。</p>
</body>
</html>

绑定循环时的数据:

<article ng-bind-html="myText | trustHtml"></article>

app.filter('trustHtml', function ($sce){
	return function(input){
		return $sce.trustAsHtml(input);
	}
});

其中$sce是angularJS自带的安全处理模块,$sce.trustAsHtml(input)方法便是将数据内容以html的形式进行解析并返回。将此过滤器添加到ng-bind-html所绑定的数据中,便实现了在数据加载时对于html标签的自动转义。

6.载入iframe内容

在AngularJS中直接这样写是会报错的(<iframe src="https://jiangdesheng.com/"></iframe>),因为AngularJS防止用户注入URL,所以需要对它添加信任才能正确载入。
<iframe ng-src="{{myURL}}"></iframe>

控制器中:

$scope.myURL = $sce.trustAsResourceUrl("https://jiangdesheng.com/");
//trustAsResourceUrl是AngularJS中防止用户注入URL的方法

7.ng-class 指令

开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值。
<div ng-class="{true:'class1',false:'class2'}[condition]"></div>

condition为true使用class1,为false使用class2。

<div ng-class="{'class1':condition1,'class2':condition2,'class3':condition3}"></div>

condition1为true时class加上class1;condition1为true时加上class2;condition3为true时加上class3;class1、class2、class3可共存。

8.ng-src图片加载失败时使用默认图片

如果图片正常能显示,那这么使用一点问题没有,但是,如果图片加载失败了(例如该图片已经不存在,从而出现404错误),在该放图片的地方就会出现一个难看的图片加载失败图标,如果想把这个图标换成你自定义的图片,可以如下这么做:

模板文件中:

<img ng-src="{{currentUrl}}" err-src="images/404.jpg"/>

然后定义directive:

app.directive('errSrc', function(){
	return {
		link: function(scope, element, attrs){
			element.bind('error', function(){
				if (attrs.src != attrs.errSrc){
					attrs.$set('src', attrs.errSrc);
				}
			});
		}
	}
});

9.$apply方法刷新model

控制器controller内,$scope有个$apply方法,可以代码更改model并同步更新页面。通常,控制器内的方法执行完毕后仅会自动刷新一次页面展示,使用$apply方法即可在想刷新页面时就刷新。
//用$scope的$apply方法实现每秒自动刷新model
app.controller('myController',function($scope){
	$scope.date=new Date();
	$scope.count=0;
	setInterval(function(){
		$scope.$apply(function(){
			$scope.date=new Date();
			$scope.count++;
		});
	},1000);
});

10.监听$destory事件

在controller中监听$destory事件,该事件在页面发生跳转时触发。常用于释放相关资源或销毁相关事件(例如释放定时任务等)。
$scope.$on('$destroy',function(){
	//do sth...
});

11.value(name, value);和constant(name, value);的区别

constant可以注入到配置函数config中,而value不可以

点击查看官方文档说明

12.directive作用域scope隔离与继承

当需要创建一个可重复使用的directive,只需要偶尔访问或者修改父scope的数据,需要用到隔离scope的方式了。当使用隔离scope的时候,会创建一个没有依赖父scope的scope,并提供一些访问父scope的方式@&=
directive的scope属性:

默认值false,表示继承父作用域;

为true时表示继承父作用域,并创建自己的作用域;

为{}时表示创建一个全新的隔离作用域。

隔离scope和父scope如何交互:

@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串,因为 dom 属性是字符串。(这种绑定是单向的,即父 scope 的绑定变化,directive 中的 scope 的属性会同步变化,而隔离 scope 中的绑定变化,父 scope 是不知道的。

& 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称,则属性名称为相同的本地名称。(此表达式可以是一个 function。 比如当你写了一个 directive,当用户点击按钮时,directive 想要通知 controller,controller 无法知道 directive 中发生了什么,也许你可以通过使用 angular 中的 event 广播来做到,但是必须要在 controller 中增加一个事件监听方法。 最好的方法就是让 directive 可以通过一个父 scope 中的 function,当 directive 中有什么动作需要更新到父 scope 中的时候,可以在父 scope 上下文中执行一段代码或者一个函数。

= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。(当你想要一个双向绑定的属性的时候,你可以使用=来引入外部属性。无论是改变父 scope 还是隔离 scope 里的属性,父 scope 和隔离 scope 都会同时更新属性值,因为它们是双向绑定的关系。

相关资料

有朋自远方来...评论一下呗O(∩_∩)O

  • 评论(1)

    天津网站建设 [ 回复 ]
    2018-09-16 00:11

    感谢博主分享,很有用