![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
AngularJs
世态炎凉!!
谢谢你的关注!
展开
-
input on-change事件触发失效和重复上传相同文件失效bug
问题1: 在使用angularJs情况下, 使用input标签 配合 ng-change 无效,为什么原生的 input的onchange事件有效?问题2: 使用input标签 文件上传svg之后,然后再上传用同一个svg文件,没有任何反应?问题1:原因:首先 ng-change事件要与ng-model绑定,但是在input type类型为file的时候ng-change是无效,所以我们可以这样写<input type="file" class="inputBtn" accept="image原创 2021-05-14 16:27:29 · 3907 阅读 · 1 评论 -
AngularJs input type =“range“ vlaue默认值为50?
最近做项目,引入了 three.js 做3d模型预览,然后有个功能是放大 缩小的功能,里面用到了 H5的input 滑块!先看下效果图(灯光还没调好)!再看下上图的html代码:这里设置了滑块的最大值max,最小值min,每次的步数step,默认值value,因为这些配置都是请求回来的配置数据,是个异步的数据,所以刚开始加载这个3d组件的时候我觉得这些值都是underfined的,但是当我打断点的时候发现 value默认值为50,并且一初始化的时候就跑了ng-change事件(underfined变原创 2021-03-27 14:55:46 · 3332 阅读 · 0 评论 -
Error: [$compile:multidir] Multiple directives [xxxx, xxxx] asking for new/isolated scope
用angular做项目,应该会碰到Error: [$compile:multidir] Multiple directives [xxxx, xxxx] asking for new/isolated scope这个报错,这个意思是多个指令在一个元素上创建了多个隔离作用域!有两种情况会报这种错误!,先看第一种情况,看下面j简单的代码:<body> <div ng-app="App"> <custom-tag> </custo原创 2020-09-07 19:09:17 · 1529 阅读 · 1 评论 -
你不知道的angularJs内置directive(二)
上篇文章讲解了ng-change,ng-checked,ngClassEven,ngClassOdd,ngCopy,ngCut等一些内置指令,下面将继续说下那些不怎么经常用的ng directive,话不多说,直接进入正题!1.ngForm作用:这个Directive实例化了一个FormController来负责表单内的页面逻辑(主要是表单验证)注意:ngForm不能替代,因为它缺少内置的HTML功能。具体来说,你不能ngForm像标签一样提交。这意味着你要用ngSubmit 将数据发送到服务器。原创 2020-09-29 18:47:08 · 1258 阅读 · 0 评论 -
你不知道的angularJs内置directive(一)
angualr directive 的directive有很多,平时用的比较多ng-click,ng-if,ng-repeat等,那面下面来说下不怎么经常用的ng directive,好了话不多说,直接进入正题!1.ng-change作用:当用户更改输入时或者当输入值的变化时候,会触发ng-change事件该指令必须ngModel同时使用<!DOCTYPE html><html lang="en" ng-app='changeExample'><head>原创 2020-09-18 11:11:47 · 1266 阅读 · 0 评论 -
angularJs ng-bind,ng-init,ng-bind-html,ng-bind-template区别
用了angularJs的对这几个指令应该并不陌生,它们之前就什么区别,可能有些人对此用法比较模糊,下面我们来一一讲解下:1.ng-bind作用:告诉AngularJS用给定表达式的值替换指定HTML元素的文本内容,并在该表达式的值更改时更新文本内容注意: ng-bind不能解析html元素,它只能解析普通字符串<body ng-controller='MyCtrl'> <div ng-bind="html"></div> <div ng-原创 2020-09-12 11:01:57 · 528 阅读 · 0 评论 -
angularJs Error: [ng:areq] Argument ‘fn‘ is not a function, got undefined
今天做项目,重构一个组件的时候,无端报了一个这样的错!Error: [ng:areq] Argument ‘fn’ is not a function, got undefined,花了我很久的时间才找到这个错误!原来是因为我注册的component组件时候出了问题!项目结构比较复杂,我直接用一个最简单的例子来说下!<body> <div ng-app="App"> <custom-tag> </custom-tag>原创 2020-09-08 15:46:24 · 3176 阅读 · 0 评论 -
angularJs中的copy,extend,merge(深拷贝和浅拷贝)
平时做项目应该经常用了拷贝数据,之前文章有详细讲解过深拷贝和浅拷贝的问题,那么在angular的环境中有那么拷贝呢,平时我们用的比较多的会是copy,extend,merge,下面详细讲解下其中的用法和坑!1 .angular.copy(source,destination)先搬出官方定义的API:复制一个对象或者一个数组(好吧,万物皆对象,数组也是一个对象)。如果省略了destination,一个新的对象或数组将会被创建出来。如果提供了destination,则source对象中的所有元素和属原创 2020-08-28 14:57:17 · 1247 阅读 · 0 评论 -
一个input标签解决文件单选多选的问题
好久没写博客,最近项目优化,看见文件上传组件,发现之前用的是两个input标签,一个是多选,一个是单选,用过配置来控制显示或者隐藏<div ng-click='!ctrl.fileUploader.isUploading && ctrl.reset($event)' class=" upload-text text-center " ng-class="{'bg-...原创 2020-04-14 18:57:53 · 4376 阅读 · 1 评论 -
AngularJs 生命周期$onChanges钩子函数总结
1.概念1.可变对象(在js中,对象是可变的)var person ={ name:'张三',//在对象中创建了一个值为张三的name对象 age:'18'}person.name ='李四' //给name赋值一个新的值,这个时候并不会个对象name分配新的内存地址,而是在原来的地址上修改了原来的值2.不可变对象字符串是不可变的,也是说当一个字符串在内存中被创建后,他的值永远是...原创 2019-12-21 17:57:19 · 1411 阅读 · 0 评论 -
angularjs和js中同一个元素上如何实现ng-click(onclick),ng-dblclick(ondblclick)事件
单击,双击事件相信大家应该很了解了,他们可以分别执行自己的事件,但是如果用一个元素的既有单击事件,又有双击事件,这种情况下,该如果实现各自的事件呢?看下面代码:html代码: <button onclick="single(event)" ondblclick="double(event)">按钮</button>js代码: var time = 200;...原创 2019-12-07 16:51:46 · 1121 阅读 · 1 评论 -
angular中scope,controller,this继承区别
1.scope的几种继承说到scope,我们可能会想到rootScope,因为所有的scope都是由rootScope产生出来的,我们也知道在angular里面 scope有几种继承形式:1.scope为false,完成继承父的scope,子scope,父scope修改值都互相影响(其实同一scope下修改的是用一个值)2.scope为true,子创建一个scope(注意此时和父是两个不用s...原创 2019-10-19 17:01:39 · 1197 阅读 · 0 评论 -
AngularJs之angular-file-upload上传组件使用和总结
最近做项目把组件分离,之前用上了第三方组件,里面的逻辑写的不是很好,抽空时候研究了下这个组件,然后把它独立的分离出来了,虽然它是个第三方组件,但是还是有些项目中有些需求它还是实现不了,所以修改了并把它封装成了一个自己能用的组件。一.初步认识angular-file-uploadAngular File Upload是AngularJS框架的模块。支持拖放式上传,上传进度,验证过滤器和文件上传队...原创 2019-09-21 18:44:37 · 3983 阅读 · 5 评论 -
angular scope创建、继承和销毁以及scope生命周期(源码分析)
在js中有函数作用域和全局作用域(es5),angular也存在作用域,它是如何创建的呢?1.scope的创建和继承首先ng-app指令会查找作用范围,在它上面会有个根作用域($rootScope): function Scope() { this.$id = nextUid();// uid = 0 function nextUid() { return ++uid ;} ...原创 2019-07-06 18:01:36 · 1609 阅读 · 0 评论 -
angularJs $evalAsync , $ $phase和$ $postDigest深入分析
上一篇文章已经详细讲解了脏检查的实现原理,如果不了解的可以点击这里今天我们来谈下 scope中的一个异步方法$evalAsync,我平时用的很少,几乎都不怎么用,那是因为我不知道这个方法有啥作用,下面我来从前入深的介绍下这个方法:在JavaScript中,我们经常会把一段代码“延迟”执行,把它的执行延迟到当前的执行上下文结束之后的未来某个时间点。最常见的方式就是调用setTimeout()函数...原创 2019-06-29 17:48:33 · 1602 阅读 · 0 评论 -
AngularJs scope事件机制$emit , $broadcast,$on广播事件(源码分析)
在angular scope中可以通过$on,$emit和$broadcast方法实现了自定义事件机制,实现数据共享,原理其实并不复杂,下面我会用例子来做分析,先看一段测试源码: <div ng-controller="parentCtrl"> <div ng-controller="selfCtrl"> <a ng-c...原创 2019-07-13 18:45:05 · 3088 阅读 · 0 评论 -
Angular之$watch、$apply、$digest原理深入分析(附带源码分析)
双向绑定可以说angular的一个很强大的功能,而且之前只知道angular有双向绑定,也没仔细学习,其中的原理更是只略知一二,前些天特意花了点时间整理下资料,把自己的理解记录下来。(如果有错误,很乐意接受指正!)脏值检测(Dirty Checking)angular正是因为这个脏值检查所以实现了双向绑定,其实大概实现的原理是,通过watch一次又一次监控值,比较现在的值和上次的值变化(脏值检...原创 2019-06-22 18:32:41 · 1918 阅读 · 5 评论