AngularJS 遇到的小坑与技巧小结

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 参考手册英文版，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 学习Angular中作用域需要注意的坑

    Angular作用域 在用angular搭建的网页应用中,作用域(scope)这个概念是贯穿其中的.在angular的视图(view)中的很多指令是会创建一个作用域的,例如 ng-app , ng-controller 等.这个作用域就是我们在写控制器构造函数时注入的 $scope (angular1.2之前的版本),他是视图模型(view model)中的一个概念.我们的数据模型(model)就是定义在作用域中的. Angular作用域的坑 用过angular的人应该都会经过一个过程,就是刚开

  • 浅谈angularjs module返回对象的坑(推荐)

    通过将module中不同的部件拆分到不同的js文件中,在组装的时候发现module存在一个奇怪的问题,不知道是不是AngularJS的bug.至今没有找到解释. 问题是这样的,按照理解,angular.module('app.main', []);这样一句话相当于从app.main命名空间返回出一个app对象.那么,不论在任何js文件中,我通过该方法获得的app变量所储存的指针都应该指向唯一的一个堆内存,而这个内存中存储的就是这个app对象.这种操作在module的js文件,和controlle

  • 浅谈angular懒加载的一些坑

    浅谈angular懒加载的一些坑

    写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang

  • AngularJS Module方法详解

    AngularJS是什么? AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强. 何为HTML标签增强?其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签.自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive).后面会详细介绍.那么,什么又是动态web应用呢?

  • AngularJS 遇到的小坑与技巧小结

    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)

  • JS常用函数和常用技巧小结

    学习和工作的过程中总结的干货,包括常用函数.常用js技巧.常用正则表达式.git笔记等.为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路. Ajax请求 jquery ajax函数 我自己封装了一个ajax的函数,代码如下: var Ajax = function(url, type success, error) { $.ajax({ url: url, type: type, dataType: 'json', timeout: 10000, success: fu

  • Nodejs 和Session 原理及实战技巧小结

    Nodejs 和Session 原理及实战技巧小结

    一 Cookie 因为HTTP协议是没有状态的,但很多情况下是需要一些信息的,比如在用户登陆后.再次访问网站时,没法判断用户是否登陆过.于是就有了cookies,用于在浏览器端保存用户数据,它有如下特点 1 是在客户端浏览器端才有的 2 用于记录信息,大小最大为4K字节 3 如果使用了cookies,那么任何对该域名的访问都会带上cookies 目前新型网站更多的采用浏览器缓存,cookie会存在一些问题,比如你每次往服务器提交请求时,都会带上cookie,无论是你访问的是不是静态图片. coo

  • javascript 数组精简技巧小结

    数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率. 1. 删除数组的重复项 2. 替换数组中的特定值 有时在创建代码时需要替换数组中的特定值,有一种很好的简短方法可以做到这一点,咱们可以使用.splice(start.value to remove.valueToAdd),这些参数指定咱们希望从哪里开始修改.修改多少个值和替换新值. 3. Array.from 达到 .map 的效果 咱们都知道 .map() 方法,.from() 方

  • Python创建二维数组实例(关于list的一个小坑)

    0.目录 1.遇到的问题 2.创建二维数组的办法 •3.1 直接创建法 •3.2 列表生成式法 •3.3 使用模块numpy创建 1.遇到的问题 今天写Python代码的时候遇到了一个大坑,差点就耽误我交作业了... 问题是这样的,我需要创建一个二维数组,如下: m = n = 3 test = [[0] * m] * n print("test =", test) 输出结果如下: test = [[0, 0, 0], [0, 0, 0], [0, 0, 0]] 是不是看起来没有一点问

  • 浅谈Android为RecyclerView增加监听以及数据混乱的小坑

    为 RecyclerView增加监听 1.在实现好的MyAdapter中写内部接口: public void setOnItemLongClickListener(OnItemLongClickListener onItemLongClickListener) { this.onItemLongClickListener = onItemLongClickListener; } public void setOnItemClickListener(OnItemClickListener onIt

  • 详解Spring Cloud Feign 熔断配置的一些小坑

    1.在使用feign做服务调用时,使用继承的方式调用服务,加入Hystrix的熔断处理fallback配置时,会报错,已解决. 2.使用feign默认配置,熔断不生效,已解决. 最近在做微服务的学习,发现在使用feign做服务调用时,使用继承的方式调用服务,加入Hystrix的熔断处理fallback配置时,会报错,代码如下: @RequestMapping("/demo/api") public interface HelloApi { @GetMapping("user/

  • 详解使用element-ui table组件的筛选功能的一个小坑

    使用element-ui table组件的筛选功能的一个小坑 使用自定义模板和筛选功能,一开始的代码 <el-table-column v-if="key==='isShow'" label="是否在发现页展示" :filters="[{text:'已展示',value: true},{text: '未展示', value: false}]" :filter-method="filterShow"> <tem

  • 关于redigo中PubSub的一点小坑分析

    前言 最近在用 golang 做一些 redis 相关的操作,选用了 redigo 这个第三方库.然后在使用 Pub/Sub 的时候,却发现了一个小坑-- Redis Client 首先,我们来初始化一个带连接池的 Redis Client: import ( "github.com/gomodule/redigo/redis" ) type RedisClient struct { pool *redis.Pool } func NewRedisClient(addr string,

  • Python开发的十个小贴士和技巧及长常犯错误

    下面是十个Python中很有用的贴士和技巧.其中一些是初学这门语言常常会犯的错误. 注意:假设我们都用的是Python 3 1. 列表推导式 你有一个list:bag = [1, 2, 3, 4, 5] 现在你想让所有元素翻倍,让它看起来是这个样子:[2, 4, 6, 8, 10] 大多初学者,根据之前语言的经验会大概这样来做 bag = [1, 2, 3, 4, 5] for i in range(len(bag)): bag[i] = bag[i] * 2 但是有更好的方法: bag = [

随机推荐