AngularJS 开发问题总结

html解析过滤器的方法

问题：让带有html标签的字符串会解析

app.register.controller('HomeController', function($scope, layer,$interval) {})

.filter('to_trusted', ['$sce', function ($sce) {
　　　　return function (text) {
　　　　　　return $sce.trustAsHtml(text);
　　　　}
　　}]
);

使用方法

<div ng-bind-html="noticeContent | to_trusted"></div>

 

关于定时器的方法

问题：控制器切换的时候定时器累加，动画加速,错乱

app.register.controller('HomeController', function($scope,$interval) { //注入定时器

　　$scope.baner_timer = $interval(function() {
　　　　console.log("持续执行函数");
　　}, 4000);

})

//切换控制器的时候消除执行的定时器

$scope.$on('$destroy',function(){ 
　　$interval.cancel($scope.baner_timer);
})

 

手机WEB点击事件响应缓慢，快速点击页面放大缩小

问题：head已添加<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />，但是快速点击还是会页面放大缩小

//引入fastclick.js插件  requirejs方法

define(['fastclick'], function(fastclick){

　　fastclick.attach(document.body);

});

 

直接调用方法

if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
或者你使用了jquery插件，你可以这样编写：

$(function() {
FastClick.attach(document.body);
});

 

多中状态改变class的方法

问题：状态栏的文字要随着不同状态改变class

如果是两种状态可以 ng-class="判断?'blue':'gray'"  true 可以拿对应的参数做判断，为真则是蓝色，否则是灰色！

多种状态这样做就行不通了，于是有了下面这种方式

ng-class="{"blue":判断1，"red":判断2，"orange":判断3}"