首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

AngularJS编辑按钮只工作一次,然后TypeError: l不是一个函数

这个问题可能是由于以下原因导致的:

  1. 错误的函数定义:TypeError: l不是一个函数错误通常是由于在调用函数时,函数名被错误地赋值为了一个非函数类型的变量。请确保在调用函数之前,函数名被正确地定义和赋值。
  2. 作用域问题:AngularJS使用作用域来管理变量和函数的访问权限。如果编辑按钮的点击事件处理函数在正确的作用域内定义,但是在调用时出现了作用域问题,可能会导致TypeError: l不是一个函数错误。请确保函数在正确的作用域内定义和调用。
  3. 依赖注入问题:AngularJS使用依赖注入来管理模块和组件之间的依赖关系。如果编辑按钮的点击事件处理函数依赖于其他模块或组件,但是没有正确地注入这些依赖,可能会导致TypeError: l不是一个函数错误。请确保所有依赖被正确地注入。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularJS in Action读书笔记2——view和controller的那些事儿

当html加载完成后,angularjs就开始解析DOM节后并编译其中包含的directives,这就是compilation阶段的工作;     一旦html中的所有元素都编译完了,angularjs...4.1 ngRepeat   你如何展示一个对象数组,而且实现并没有定义他们的布局等等,如果有个东西能够定义一个template然后只要repeat每个对象就可以展示是不是炫爆了,没错,angularjs...我们定义一个对象数组,其中有各个不同的status,通过ngRepeat来遍历每个status然后显示到页面上。   ...display a story   这里做了一些准备工作一个currentStory和editStory。...是如何传值,明白了angularjs这种里面的函数的参数的值从何而来。

1.4K100

AngularJS2+调用原有的js脚本(AngularJS脚本跟本地原有脚本之间的关系)

事实上,编译不仅仅干这么一点事,很多的优化工作、查错工作,也是在这个阶段完成的,比如你使用了没有定义的变量、函数;比如你用错了函数类型;比如你使用了某个函数库但只是用了其中一小部分,那么多没用的部分应当排除掉避免占用宝贵的下载带宽...上面是从技术实现上的限制原因,实际上还有一个设计哲学逻辑上的原因: AngularJS设计之初就不是为了单纯的在桌面浏览器中运行,还希望能够在手机、移动设备甚至其它设备上执行。...当然不是,你肯定早看到了,大量的第三方模块和代码库,通过NPM的管理,共存于这个架构中,彼此友好的相处。你原有的工作,完全可以用同样的方式来工作。...这就牵涉到我上面解释的最后一条,将来这段AngularJS代码,很可能不是运行在一个浏览器,其中可能根本没有window/document对象,那时候,这段代码就出错了。...但是比较规范的办法,应当是把window对象以及你需要的其它类似对象,写成一个服务,然后注入到app.component之中,这样,即便将来运行环境有变化,修改服务部分代码,你的主程序完全可以不用修改

1.6K60
  • 从Lisp到Vue、React再到 Qwit:响应式编程的发展历程

    和后来的 React 这样的框架取而代之的原因之一,因为开发者可以简单地使用点符号来访问和设置状态,而不是一组复杂的函数回调。...但是 Knockout 有一个有趣的创新 —— 计算属性,它可能已经存在过,但这是我第一次听说。它们会自动在输入上创建订阅。...响应性即使开发人员将Accessor转换为原始类型也能正常工作。 我们还能在此基础上做出什么改进吗? 响应性和渲染 让我们想象一个产品页面,有一个购买按钮一个购物车。...在上面的示例中,我们有一个树形结构中的组件集合。用户可能采取的一种可能的操作是点击购买按钮,这需要更新购物车。对于需要执行的代码,有两种不同的结果。...文章从早期的编程语言开始讲述,比如Lisp和Smalltalk,它们的数据结构和函数式编程的特性促进了响应式编程的发展。然后,文章提到了响应式编程框架的出现,如React和Vue.js等。

    1.7K20

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    举个栗子 increase 1 click 时会产生一次更新的操作(至少触发两次 $digest 循环) 按下按钮 浏览器接收到一个事件...$digest 循环的上限是 10 次(超过 10次后抛出一个异常,防止无限循环)。 $digest 循环不会运行一次。...实际上, 脏检查是digest执行的,另一个更常用的用于触发脏检查的函数apply——其实就是 $digest 的一个简单封装(还做了一些抓异常的工作)。...1) 最直接的差异是, $apply 可以带参数,它可以接受一个函数然后在应用数据之后,调用这个函数。...AngularJS对此有着非常明确的要求,就是它负责对发生于AngularJS上下文环境中的变更会做出自动地响应(即,在$apply()方法中发生的对于models的更改)。

    7.8K40

    虚拟DOM已死?|TW洞见

    1 ReactJS虚拟DOM的缺点 比如, ReactJS 使用虚拟 DOM 机制,让前端开发者为每个组件提供一个 render 函数。...比如,你想要在某个 列表的顶部插入一项 ,那么 ReactJS 框架会误以为你修改了 的每一项 ,然后在尾部插入了一个 。...这种精确的映射关系,描述了数据之间的关系,而不是 ReactJS 的 render 函数那样描述运算过程。...按钮最后一次按下的时间是" + (new Date).toString } @dom def render = { { status.bind } <button onclick...注意,status 并不是一个普通的函数,而是描述变量之间关系的特殊表达式,每次渲染时执行其中一部分代码。比如,当 count 改变时,只有位于 count.bind 以后的代码才会重新计算。

    6K50

    Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    这里就是 Angularjs1.X双向数据绑定中的第一个坑 ,你会发现$scope上绑定的数据模型和html中显示的内容有时候并不是实时关联的。这其实和Angularjs1.X的执行机制有关系。...按钮 2.2 你丫怎么又不刷新了 随着上一节的操作步骤,我们一起来见证双向数据绑定中又一次闹鬼事件: 点击5次+1按钮,再点击5次数字标签 结果为: ?...是不是有一种被骗的感觉?别着急,接着看。 点击show $scope.testInfo按钮 结果为: ?...其实这里的问题仍然和Angularjs的运行机制有关,解决方案如下: 解决方案1 使用自定义指令的templateUrl属性替换当前指令的模板,使用ng-click指令来绑定一个点击响应函数,在响应函数中改变...,直到某一次遍历后WatchCollection中的变量都没有变化,则Angular会认为当前的改动已经稳定了,然后才会将数据模型的变化同步到DOM元素上去,也就实现了数据绑定。

    3.5K20

    Angular与MVVM框架

    源码分析 AngularJS通过使用自己的事件处理循环,改变了传统的Javascript工作流。这使得Javascript的执行被分成原始部分和拥有AngularJS执行上下文的部分。...指令的$compile()函数能修改DOM结构,并且要负责生成一个link函数。$compile方法最后返回一个合并起来的链接函数,这是链接函数是每一个指令的compile函数返回的链接函数的集合。...可以应用于当需要生成多个element实例,只有一个template element的情况,ng-repeat就是一个最好的例子,它就在是compile函数阶段改变原始的dom生成多个原始dom节点,然后每个又生成...digest方法是dirty check的核心,也是双向绑定的主要实现,主要思路是先执行$$asyncQueue队列中的表达式,然后开启一个loop来的执行所有的watch里的监听函数,前提是前后两次的值是否不相等...$root属性,这个默认是指向rootscope的 如果不是独立的作用域,则会生成一个内部的构造函数,把此构造函数的prototype指向当前scope实例 $injector 依赖注入 每一个AngularJS

    2.6K20

    Angular与MVVM框架

    源码分析 AngularJS通过使用自己的事件处理循环,改变了传统的Javascript工作流。这使得Javascript的执行被分成原始部分和拥有AngularJS执行上下文的部分。...指令的$compile()函数能修改DOM结构,并且要负责生成一个link函数。$compile方法最后返回一个合并起来的链接函数,这是链接函数是每一个指令的compile函数返回的链接函数的集合。...可以应用于当需要生成多个element实例,只有一个template element的情况,ng-repeat就是一个最好的例子,它就在是compile函数阶段改变原始的dom生成多个原始dom节点,然后每个又生成...digest方法是dirty check的核心,也是双向绑定的主要实现,主要思路是先执行$$asyncQueue队列中的表达式,然后开启一个loop来的执行所有的watch里的监听函数,前提是前后两次的值是否不相等...$root属性,这个默认是指向rootscope的 如果不是独立的作用域,则会生成一个内部的构造函数,把此构造函数的prototype指向当前scope实例 $injector 依赖注入 每一个AngularJS

    3.9K90

    那些Vue开发遇到的坑---响应式系统

    有的同学可能会提到AngularJS,这里就要说道,Vue的一些语法设计的确参考了AngularJS,但是Vue的API设计相对AngularJS要简单的多,学习成本更低。...当这个Vue实例被注册时,我们的响应式系统会为message设置一对getter/setter函数然后这个Vue实例会去一个叫做watcher的地方登记他用到的变量,这里它登记的就是message,它告诉...Watcher就在小本本上记下来了,并且和message的getter/setter函数保持联系,当我们点击按钮按钮的click事件改变了message的值,这时会先调用setter函数,setter...值显示在按钮上,至此,一次响应式更新完成了。...然后作为一个程序员,你可能就要开始打debugger一步一步的调试,然后你会发现,你的代码并没有写错,在调试器中,message的属性确实改变了,并且按照预期被设置为‘clicked’,但是,为什么页面毫无反应

    1.1K50

    深入探讨前端UI框架

    ,Ajax,产生了一个事件,事件监听者进行相应的处理,然后把变动体现到UI上,或者把用户的输入数据上传到服务器 2.2 前端框架 可以看到前端要做的工作还是比较直观,简单的 但是,当一个页面很复杂,比如...并不是就会执行UI渲染,UI渲染需要等待js执行完毕才会执行,可以理解为浏览器对js的执行和UI渲染都是同一个线程(虽然表现是这样,但是底层应该是js一个线程,UI渲染一个线程,只是浏览器只能执行一个线程...和react,他们的更新逻辑的入口都是在关键点调用更新接口 它们的共同点都是一次更新逻辑只会造成一次UI更新 AngularJs通过类似死循环的$digest循环扩展浏览器的原生事件循环,所有更新逻辑都是在...,确实,AngularJs和react根本就不是一个可对比的库,本质都不一样 react应用,不管是配合flux还是redux,他们都是先把store计算稳定之后,再交给react去更新UI,这整个过程并不会劫持浏览器的原生事件循环...avalon等vm库,都是用watcher模式,watcher是长存的 react是实时计算的,在diff之后,old tree就会被销毁,然后保留new tree作为下一次diff的old tree

    1.5K70

    前端大牛们都学过哪些东西?

    如果某个同学都学会了上面的那些东西,是不是就能完全的胜任前端开发工作呢? 未必。 因为但这些只是属于【术】的范围。什么意思呢?...就是说,这些前端技术、工具它们都需要你能够对前端开发有一个完整、全面的认识。在这样的基础之上,这些技术、工具才能发现出它们应有的效果。...CSS CSS 语法参考 CSS3动画手册 腾讯css3动画制作工具 志爷css小工具集合 css3 js 移动大杂烩 bouncejs 触摸库 css3 按钮动画 animate.css 全局CSS...富文本编辑器 百度 ueditor 经典的ckeditor 经典的kindeditor wysiwyg 一个有情怀的编辑器。...剪贴板 剪贴板 clipboard 最新的剪切方案 不是Flash的剪贴板 18. 简繁转换 简繁转换 19.

    5K30

    Python 自动化指南(繁琐工作自动化)第二版:一、PYTHON 基础知识

    在 Windows 上,打开“开始”菜单,键入Mu,然后打开 Mu 应用。在 MacOS 上,打开应用文件夹,双击Mu。点击新建按钮,保存一个空文件为blank.py。...当您通过单击运行按钮或按下F5来运行这个空白文件时,它将打开交互式 shell,该 Shell 将作为一个新窗格在 Mu 编辑器窗口的底部打开。您应该会在交互式 Shell 中看到一个>>>提示。...你的第一个程序 虽然交互式 Shell 适合一次运行一条 Python 指令,但是要编写整个 Python 程序,您需要将指令输入到文件编辑器中。...文件编辑器类似于记事本或 TextMate 等文本编辑器,但它有一些专门用于输入源代码的特性。要在 Mu 中打开一个新文件,点击最上面一行的新建按钮。...TypeError: can only concatenate str (not "int") to str 这个错误不是由print()函数引起的,而是您试图传递给print()的表达式引起的。

    1K31

    Angular面试题_session面试题

    原理 AngularJS 是通过构造函数的参数名字来推断依赖服务名称的,通过 toString() 来找到这个定义的 function 对应的字符串,然后用正则解析出其中的参数(依赖项),再去依赖映射中取到对应的依赖...的 injector 是假设函数的参数名就是依赖的名字,然后去查找依赖项,那如果按前面栗子中那样注入依赖,代码压缩后(参数被重命名了),就无法查找到依赖项了。...性能力(性能和能力) 编译的时候,compile转换dom,碰到绑定监听器的地方就先存着,有几个存几个,到最后汇总成一个link函数,一并执行,提升了性能。...function link(scope, iElement, iAttrs, controller) { … } iElement为编译后的element,已经与作用域关联起来,所以可以数据绑定 如果指令进行...DOM的修改,不进行数据绑定,那么配置在compile函数中,如果指令要进行数据绑定,那么配置在link函数中。

    4.9K150

    深入探讨前端UI框架

    ,Ajax,产生了一个事件,事件监听者进行相应的处理,然后把变动体现到UI上,或者把用户的输入数据上传到服务器 2.2 前端框架 可以看到前端要做的工作还是比较直观,简单的 但是,当一个页面很复杂,比如...并不是就会执行UI渲染,UI渲染需要等待js执行完毕才会执行,可以理解为浏览器对js的执行和UI渲染都是同一个线程(虽然表现是这样,但是底层应该是js一个线程,UI渲染一个线程,只是浏览器只能执行一个线程...和react,他们的更新逻辑的入口都是在关键点调用更新接口 它们的共同点都是一次更新逻辑只会造成一次UI更新 AngularJs通过类似死循环的$digest循环扩展浏览器的原生事件循环,所有更新逻辑都是在...,确实,AngularJs和react根本就不是一个可对比的库,本质都不一样 react应用,不管是配合flux还是redux,他们都是先把store计算稳定之后,再交给react去更新UI,这整个过程并不会劫持浏览器的原生事件循环...avalon等vm库,都是用watcher模式,watcher是长存的 react是实时计算的,在diff之后,old tree就会被销毁,然后保留new tree作为下一次diff的old tree

    82120

    Angularjs进阶笔记(2)-自定义指令中的数据绑定

    ,常用作方法调用 fromName: '@' // 从父级获取值后便在本地作用域生效 } 关于三种绑定方式使用的方法,网上可以搜到非常多的文章,本篇不再赘述,今天我们来详细看一下这几种方式的使用场景和区别...实际场景: 例如我们封装了一个分页组件,其中指令局部作用域中的displayPaginationNums属性用于决定分页组件的页码栏显示多少个按钮然后把剩余的按钮收起来并添加...按钮,这是一个很常见的需求...此处就是从封闭转为开放的一个示例,虽然看起来很细小,但可以很明确地表达这个原则。 2.2 &绑定 &绑定用于传递父级函数的引用,用来调用父级控制器中定义的方法。...实际场景: 比如我们在制作一个表格和分页组件时,表格每一页只显示10条数据,分页是后台来完成的,那么每一次点击分页组件上的页码按钮时,我们都需要向后台发送ajax请求来获取新一页的数据。...实际上在开发过程中,不熟悉&绑定的开发者在使用自定义指令时,几乎都会选择将方法写在controller中并通过消息机制来触发这个函数(也就是上文中第一个方法),他们希望指令所封装的组件是纯粹的,换句话说

    2.1K20

    AngularJS in Action读书笔记1——扫平一揽子专业术语

    简而言之,以前的理解是针对某个点或者面,但是如果停留在这个角度,在阅读理解项目代码时经常犯晕,一个偶然的机会,我看到了《AngularJS in action》,虽然看到的是英文版,但是看了几页之后觉得思路清晰...2.功能模块易测试   AngularJS的代码方便测试。虽然代码易测试不能成为一个框架闪光的决定性因素,但是反向思考,如果写出来的代码可测试性差将会使工作效率事倍功半。...而在AngularJS中只需要将DOM中的元素与js的某个属性绑定,js属性值变化会同步到DOM元素上,同样的,DOM元素值得变化也会映射到js的属性上。夸张点说,一个是刀耕火种,一个是蒸汽驱动。...view呈现的属性和方法 Directive 指令使得AngularJS能够创建自定义的标签并实现相应的功能,可以将指令看成一种特殊的html标签 Service Service负责提供一些通用的功能函数...此篇旨在大致的了解了AngularJS的过人之处,如何构建项目,每个部分的作用。   如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!

    1.2K70

    AngularJS入门心得1——directive和controller如何通信

    个人意见,For your information 备注:视频教程,最近有看过大漠老师的AngularJS教程,觉得还不错,但是感觉没有一点基础还是听不懂的,或者要看好几遍(不是做广告)   3.为什么要了解...AngularJS   一项新技术能够面世,为众人所知,从而脱引而出,定然不是空穴来风,肯定有其标新立异的过人之处,主要有以下几点: (1)MVC的思想(或者是MVVM)   (2)模块化和依赖注入...,用于值绑定) (2)JS文件中,首先从模块开始,然后创建一个控制器行2~行4,再定义一个指令,主要实现的是将""替换为"{{water}}"标签显示...3.指令作用域中的&   主要作用是传递一个来自父scope的函数,稍后调用。 1 <!...实现两者之间的函数通信,在JS中,将前台的greeting标签替换为template中的内容,一个输入框加上一个按钮按钮上绑定了greet函数,与前台页面的greet相呼应,而前台的greet函数在控制器中有定义

    1.7K60

    Angularjs基础(二)

    =5">           总价:          使用 ng-init 不是很常见...AngularJs通过内置的指令来为应用添加功能,ng-app 指令初始化一个 AngularJS 应用程序.     AngularJs允许你自定义指令。     ...一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。 数据绑定     上面实例中的{{firstName}}表达式是一个AngularJS数据的绑定的表达式。     ...error)       为HTML 元素提供CSS 类       绑定到HTML元素到HTML表单 ng-repeat 指令     ng-repeat指令对于集合中(数组中)的每个项会克隆一次...你可以使用.directive函数来添加自定义的指令。     要调用自定义指令,HTML元素张需添加自定义指令名。

    3.5K60
    领券