一、前提在开始本文之前先设定，从server取下来的内容是一个html格式 的内容，那么如下显示： <div class="article-view-content col-md-12 col-sm-12 col-xs-12 no-padding-left no-padding-right wiki"ng-bind-html="vm.article.content | ArticlesTrim"> </div>二、过滤器现在要做的事情就是做一个过滤器就好了，让他来去掉content里面的空行 angular.module(articles).filter(ArticlesTrim, ArticlesTrim)ArticlesTrim.$inject...
angularJS在进行数据绑定时默认是以字符串的形式数据，也就是对你数据中的html标签不进行转义照单全收，这样提高了安全性，防止html标签的注入攻击，但有时候需要，特别是从数据库读取带格式的文本时，无法正常的显示在页面中。 而要对html进行转义，则需要在数据绑定的html标签中使用ng-bind-html属性，该属性依赖与$sanitize，也就是需要引入angular-sanitize.js文件，并在module定义时注入该服务ngSanitize。比如： html: <span...
本文目录 URL的#号问题找到错误原因静态网站的解决方案动态网站的解决方案一、 URL的#号问题 使用AngularJS的朋友都应该了解，AngularJS框架定义了自己的前端路由控制器，通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新，并支持HTML5的历史记录功能，详细介绍可以参考文章：AngularJS路由和模板。 对于默认的情况，是不启动HTML5模式的，URL中会包括一个#号，用来区别是AngularJS管理的路径还是WebServer管理的路径。 比如...
一、绑定初始化，自动加载 通过绑定来进行angular的初始化，会把js代码侵入到html中。 ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。 <body ng-app="myApp"><div ng-controller="myCtrl">{{ hello }}</div><script type="text/javascript">var myModule = angular.module("myApp",[]);myModule.controller("myCtrl...
前言 AngularJS中指令的重要性是不言而喻的，指令让我们可以创建自己的HTML标记，它将自定义元素变成了一个一个的模块，极大的体现了前端开发中的模块化模式，并提高了代码的易读性和重用性。AngularJS中的指令也是学习AngularJS中的一个难点所在，其中的许多属性，需要反复学习，认真体会，方能领悟其中的精妙之处。 今天我们要讲的就是其中一个重点和难点 – transclusion。关于这个话题我之前也写过很多文章来讲述，但是当时都是...
前言 大家在使用{{}}绑定数据的时候，页面加载会出现满屏尽是{{xxx}}的情况。数据还没响应，但页面已经渲染了。这是因为浏览器和angularjs渲染页面都需要消耗一定的时间，这个间隔可能很小，甚至让人感觉不到，这种情况一切正常，但这个时间也可能很长，这时候用户可能会看到满屏尽是{{xxxx}}。这种情况被叫做“Flash Of Unrendered Content (FOUC)（K）？and is always unwanted.”。 问题 为了图方便，我们很喜欢使用下面的做法<...
什么是scopeAngularJS 中，作用域是一个指向应用模型的对象，它是表达式的执行环境。作用域有层次结构，这个层次和相应的 DOM 几乎是一样的。作用域能监控表达式和传递事件。在 HTML 代码中，一旦一个 ng-app 指令被定义，那么一个作用域就产生了，由 ng-app 所生成的作用域比较特殊，它是一个根作用域（$rootScope），它是其他所有$Scope 的最顶层。除了用 ng-app 指令可以产生一个作用域之外，其他的指令如 ng-controller，ng-re...
首先来看看效果效果 实现这样的效果，必须使用指令了，只有使用指令才能单独控制每一个scope。 示例代码如下： <div class="form-group"><label class="col-sm-2 control-label">请选择文章主题色彩</label><div class="col-sm-10" theme-group><label class="i-switch m-t-xs m-r"><input type="checkbox" input-theme ><i></i></label><label class="i-switch bg-info m-t-xs m-r"><input type="checkbox" input-theme><i></i></...
本文给大家分享angular.js学习笔记之自定义指令实例代码讲解，具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularDirective</title> <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script> </head> <body ng-app="angularJS" > <!-- <div class="self-direct">{{title}}<input type="text" ng-model=title></div> --> <!-- <input type="text" ng-model="...
页面传参数方法：1、$rootScope。2、（url）/user/:name/:age。页面转换方法：1、href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" 。2、$state.Go。3、$location.path。4、ui-sref（1）自带路由ngRoute<html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例</title> </head> <body ng-app=routingDemoApp ng-controller="myCtrl"> <h2>AngularJS 路由应用</h2> 名: <input type="t...
前言 最近的新项目中，用户登录需要采用cookie来记住用户，校验身份。所以本文就把实现的过程总结出来分享给大家，需要的朋友们可以参考学习。 在header中携带authId登录 在之前老的项目里，没有采用cookie来记录用户登录状态，而是在请求的header中携带一个身份标识来校验，大致方案如下： 客户端使用post请求提交user、password给服务端进行登录操作；服务端校验用户是否合法，如果合法将产生一个唯一的身份标识authId，返回给客...
前言 大家都知道在默认情况下,指令应该访问父作用域.如果我们对指令暴露了父控制器的scope,那么指令就可以自由的修改scope属性.在一些情况下,你的指令可能想要添加一些只有内部可以使用的属性和函数,如果我们都在父作用域中完成,可能会污染了父作用域,因此,我们有以下两种选择: 使用父作用域-如果不需要操作父作用域属性,不需要一个新的作用域,可以直接使用父作用域scope:false 一个子作用域-这个作用域会原型继承父作用域scope:tr...
前言 由于controllers之间不共享scope，如果希望在controllers之间传递参数，可能需要通过其他的方式实现，以下是当前我用到的两种在controllers之间传递参数的方法。注:参考文章Sharing Data Between Angular Controllers 一、service 可以写一个包含get/set的service,取参数/赋参数 .factory(paramService,function(){return {result:[],getResult:function(){return this.result;},setResult:function(res){this.result = res;}...
先上图：这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right，向左或向右的触摸事件。结合css3的transition实现的动画。ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><title>Angular2</title...
前言 之前给大家介绍过一篇关于AngularJS中实现无限级联动菜单的文章，但没来得及和大家分享使用的示例，下面这篇文章就来给大家分享下几个使用的demo。 文中包括demo如下： 1. 同步加载子选项demo2. 异步加载子选项demo3. 初始值回填demo4. 倒金字塔依赖demo 注意：在阅读本文前请先移步上一篇文章：//www.gxlcms.com/article/78126.htm 1. 同步加载子选项在各联动菜单加载之前，我们已经通过某种方式（比如后端渲染、api依赖、de...