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 · 3993 阅读 · 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 · 3387 阅读 · 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 · 1671 阅读 · 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 · 1347 阅读 · 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 · 1310 阅读 · 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 · 616 阅读 · 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 · 3284 阅读 · 0 评论 -
angularJs中的copy,extend,merge（深拷贝和浅拷贝）
平时做项目应该经常用了拷贝数据，之前文章有详细讲解过深拷贝和浅拷贝的问题，那么在angular的环境中有那么拷贝呢，平时我们用的比较多的会是copy,extend,merge，下面详细讲解下其中的用法和坑！1 .angular.copy(source，destination)先搬出官方定义的API:复制一个对象或者一个数组（好吧，万物皆对象，数组也是一个对象）。如果省略了destination，一个新的对象或数组将会被创建出来。如果提供了destination，则source对象中的所有元素和属原创 2020-08-28 14:57:17 · 1346 阅读 · 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 · 4519 阅读 · 1 评论 -
AngularJs 生命周期$onChanges钩子函数总结
1.概念1.可变对象（在js中，对象是可变的）var person ={ name:'张三',//在对象中创建了一个值为张三的name对象 age:'18'}person.name ='李四' //给name赋值一个新的值,这个时候并不会个对象name分配新的内存地址,而是在原来的地址上修改了原来的值2.不可变对象字符串是不可变的，也是说当一个字符串在内存中被创建后，他的值永远是...原创 2019-12-21 17:57:19 · 1465 阅读 · 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 · 1180 阅读 · 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 · 1240 阅读 · 0 评论 -
AngularJs之angular-file-upload上传组件使用和总结
最近做项目把组件分离，之前用上了第三方组件，里面的逻辑写的不是很好，抽空时候研究了下这个组件，然后把它独立的分离出来了，虽然它是个第三方组件，但是还是有些项目中有些需求它还是实现不了，所以修改了并把它封装成了一个自己能用的组件。一.初步认识angular-file-uploadAngular File Upload是AngularJS框架的模块。支持拖放式上传，上传进度，验证过滤器和文件上传队...原创 2019-09-21 18:44:37 · 4135 阅读 · 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 · 1666 阅读 · 0 评论 -
angularJs $evalAsync , $ $phase和$ $postDigest深入分析
上一篇文章已经详细讲解了脏检查的实现原理,如果不了解的可以点击这里今天我们来谈下 scope中的一个异步方法$evalAsync，我平时用的很少，几乎都不怎么用，那是因为我不知道这个方法有啥作用，下面我来从前入深的介绍下这个方法：在JavaScript中，我们经常会把一段代码“延迟”执行，把它的执行延迟到当前的执行上下文结束之后的未来某个时间点。最常见的方式就是调用setTimeout()函数...原创 2019-06-29 17:48:33 · 1709 阅读 · 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 · 3144 阅读 · 0 评论 -
Angular之$watch、$apply、$digest原理深入分析(附带源码分析)
双向绑定可以说angular的一个很强大的功能，而且之前只知道angular有双向绑定，也没仔细学习，其中的原理更是只略知一二，前些天特意花了点时间整理下资料，把自己的理解记录下来。（如果有错误，很乐意接受指正！）脏值检测（Dirty Checking）angular正是因为这个脏值检查所以实现了双向绑定，其实大概实现的原理是，通过watch一次又一次监控值，比较现在的值和上次的值变化（脏值检...原创 2019-06-22 18:32:41 · 1981 阅读 · 5 评论