AngularJS 遇到的小坑与技巧小结


Posted in Javascript onJune 07, 2016

1. templateURL和路由之类的要在web server下运行。

2. 使用模板replace设为true,模板里也要有相应的标签,否则不出现任何数据。

3. 1.2版本之后,ngRoute模块独立。

4.空的controller不定义会出错。

5.Directive的link参数是有顺序的:scope,element,attrs,ctrl

6.ng-repeat不能循环重复的对象。hack: ng-repeat="thing in things track by $id($index)"

7.尽量更新的是变量的属性而不是单个变量本身。

8.注意ng-repeat,ng-controller等会产生独立作用域。

9.当jquery载入,则使用jquery,否则使用内置jqlite。all element references in Angular are always wrapped with jQuery or jqLite; they are never raw DOM references.

10.Uncaught Error: [$location:ihshprfx]  A标签没有去掉 <a href="#" ng-click="someMethod();"></a>

11.Error: listen EACCES 当在linux下,会出现这个错误,因为你监听的端口的原因,这里我的是33。把它改成8080或3030之类大的端口数就可以了。有一个规定,这些端口最好是大于1024。

12. select在没有ng-model的时候,无法显示。同理,当遇到无法显示最好看文档少了什么。

补:当ng-options的源,跟书写不相配时会出现全部选择的情况,如下:

var a = [{"id":1,"name":"Ryan"}....] ,ng-options="item.i as item.name for item in a"  // i与id不同

----------------------------------------------------------------------------------------

13.ng-bind-html-unsafe已去除,可以用['ngSanitize'] 模块或使用$sce服务

From stackoverflow

You indicated that you're using Angular 1.2.0... as one of the other comments indicated, ng-bind-html-unsafe has been deprecated.

Instead, you'll want to do something like this:

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

In your controller, inject the $sce service, and mark the HTML as "trusted":

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {

  // ...

  $scope.preview_data.preview.embed.htmlSafe = 

     $sce.trustAsHtml(preview_data.preview.embed.html);

}

Note that you'll want to be using 1.2.0-rc3 or newer. (They fixed a bug in rc3 that prevented "watchers" from working properly on trusted HTML.)

查看更多AngularJS的语法,大家可以关注:AngularJS 参考手册英文版,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery解析json数据详解
Dec 26 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
vue+iview实现文件上传
Nov 17 Vue.js
模仿password输入框的实现代码
Jun 07 #Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 #Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 #Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 #Javascript
JQuery异步加载PartialView的方法
Jun 07 #Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 #Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 #Javascript
You might like
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Python rstrip()方法实例详解
2018/11/11 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
聊聊python中的异常嵌套
2020/09/01 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
新闻专业学生的自我评价
2014/02/13 职场文书
董事长助理岗位职责
2014/02/18 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
从事会计工作年限证明
2015/06/23 职场文书
初中运动会前导词
2015/07/20 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android