AngularJS的踏坑经验

前段时间一项中需要使用 AngularJS 这个框架，但在使用中发现几处比较坑的地方。在此文中列举出解决方案希望帮助到更多的人，假如你看到此篇文章时发现有好的解决方案请留言告诉我。拜托。

路由切换时自动跳到页面顶部

假如路由改变、视图刷新时页面不是在顶部位置，则新的视图页面也不在顶部位置，大多数时我们希望它能自动跳到顶部，可以在模块 run() 方法中加入下面代码：

angular.module('myApp')    .run(['$rootScope', '$document', function($rootScope, $document) {            $rootScope.$on('$routeChangeSuccess', function() {                $document[0].body.scrollTop = $document[0].documentElement.scrollTop = 0;            });        }]);

跨域请求

在使用过程中发现使用 CORS 发送跨域请求比 JSONP 更安全更简洁，方式很简单。
1.在 config 中加入下面两行代码

angular.module('myApp')    .config([ '$httpProvider', function($httpProvider) {        $httpProvider.defaults.useXDomain = true;        delete $httpProvider.defaults.headers.common['X-Requested-With'];        }]);

2.我的服务端语言是PHP，同时需要服务端配合。通过注释可以看明白一个是允许所有请求一个是指定请求

//允许所有域名都请求header("Access-Control-Allow-Origin:*");//上线后为了安全起见应指定域名//header("Access-Control-Allow-Origin:http://example.com");

显示html文本

Angularjs中输出变量使用“{{}}”或者“ng-bind”，但是如果变量中有html代码的话，angularjs为了xss安全，默认是不解析html，直接原样显示html代码。

// 控制器代码demo.controller('DemoController', [    '$scope', function($scope) {        $scope.html = '<span style="margin:20px;">这是格式化的HTML文本</span>';    }]);

// 视图代码<div ng-controller="DemoController">    <h2>显示HTML文本</h2>    <div class="content">        <p>需要显示的文本：{{html}}</p>        <p>Html格式化文本： <span ng-bind-html="html|htmlContent"></span></p>    </div></div>

这里通过$sce构建一个过滤器来对输出的html进行过滤

// htmlContent过滤器代码demo.filter('htmlContent',['$sce', function($sce) {    return function(input) {        return $sce.trustAsHtml(input);    }}]);

此文章将持续更新，在使用 AngularJS 这方面我才进入，后面将整理更多的问题与大家分享。