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

在ng-click中调用函数和在加载DOM后调用它之间的区别

是:

  1. 调用时机:在ng-click中调用函数是在用户点击相关元素时触发,而在加载DOM后调用函数是在页面加载完成后立即执行。
  2. 执行顺序:在ng-click中调用函数是在用户点击事件发生时立即执行,而在加载DOM后调用函数是在页面加载完成后按照代码顺序执行。
  3. 作用域:在ng-click中调用函数是在AngularJS的作用域内执行,可以直接访问作用域中的变量和方法,而在加载DOM后调用函数则需要确保函数所在的作用域已经被正确地初始化。
  4. 事件绑定:在ng-click中调用函数是通过事件绑定实现的,需要在相关元素上添加ng-click指令,并将函数名作为指令的参数,而在加载DOM后调用函数则可以直接在JavaScript代码中调用函数。
  5. 代码结构:在ng-click中调用函数通常是将函数定义在控制器或指令中,以便在视图中进行绑定,而在加载DOM后调用函数则可以将函数定义在任何地方,只要确保在调用之前已经加载。

总结起来,ng-click中调用函数适用于与用户交互相关的操作,例如按钮点击、表单提交等,而在加载DOM后调用函数适用于页面初始化、数据加载等不需要用户交互的操作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

两者区别在于页面没有加载完毕 {{val}} 会直接显示到页面,直到 Angular 渲染该绑定数据(这种行为有可能将 {{val}} 让用户看到);而 ng-bind 则是 Angular 渲染完毕将数据显示...假设你一个ng-click指令对应handler函数更改了scope一条数据,此时AngularJS会自动地通过调用$digest()来触发一轮$digest循环。...当$digest循环开始,它会触发每个watcher。这些watchers会检查scope的当前model值是否和上一次计算得到model值不同。如果不同,那么对应函数会被执行。...当然,也可以 trace by 任何一个普通值,只要能唯一性标识数组每一项即可(建立 dom 和数据之间关联)。...先解说下angular页面处理 ng对页面的处理过程: 浏览器把HTML字符串解析成DOM结构 ng把DOM结构给$compile,返回一个link函数 传入具体scope调用这个link函数 得到处理

7.7K40

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

那么此处问题其实就在于,setInterval函数中去修改数据模型值时,没有触发$apply()方法来更新视图,而通过调用Angularjs封装ng-*方法(例如ng-click点击方法)...其实这里问题仍然和Angularjs运行机制有关,解决方案如下: 解决方案1 使用自定义指令templateUrl属性替换当前指令模板,使用ng-click指令来绑定一个点击响应函数响应函数改变...$on( )方法监听同名事件,并修改对应数据模型值。 解决方案3 每当改变自定义指令变量值调用scope....我们可以回顾一下上面使用双向数据绑定发生异常时场景: 使用了原生定时器(Angular你应该使用$interval,$timeout服务) 用类原生方法(bind)为元素添加事件监听器,并在回函数修改了变量值...许多人都听说过"尽量不要在controller操作DOM"这句话,实际上它并不意味着你controller操作DOM会导致程序报错,而是在说如果你同时使用jQuery和Angular两套系统来管理自己代码

3.4K20

vue响应式原理(数据双向绑定原理)

Vue可能有些方面是不如React,不如Angular,但它是渐进,没有强主张,你可以原有大系统上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它视图...,而不用碰触 DOM,这样代码非常利于维护 MVVM,M(model)---代表JavaScript Objects,V(view)---DOM也就是UI,VM(ViewModel)----代表...angular.js只有指定事件触发时,进入脏值检测,大致如下: - DOM事件,譬如用户输入文本,点击按钮等(ng-click) - XHR响应事件($http) -...然后,需要compile解析模板指令,将模板变量替换成数据,接着初始化渲染页面视图,并将每个指令对应节点绑定更新函数,添加监听数据订阅者。...()方法 3)待属性变动,dep.notice()通知时,就调用自身update()方法,并触发Compile绑定 4.

2.6K40

前端面试题angular_Vue前端面试题

当然,也可以 trace by 任何一个普通值,只要能唯一性标识数组每一项即可(建立 dom 和数据之间关联)。 3,ng-click 表达式,能使用 JS 原生对象上方法吗?...不止是 ng-click 表达式,只要是页面,都不能直接调用原生 JS 方法,因为这些并不存在于与页面对应 Controller $scope 。...配置 service,get 返回,就是用 factory 创建 service 内容 从底层实现上来看,service 调用了 factory,返回其实例;factory 调用了 provider...AngularJSscope变量中使用脏值检查来实现了数据双向绑定,并且可以通过scope.watch来监听变化触发回; angular中使用是脏检查机制,angular每次你绑定一些东西到你...复杂应用,也可以为实体建立对应构造函数,比如硬盘(Disk)模块,可能有列表、新建、详情这样几个视图,并分别对应有 controller,那么可以建一个 Disk 构造函数,里面完成数据增删改查和验证操作

14.1K20

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

: 浏览器接收到事件一般流程是执行对应js回函数。...当回执行完成,浏览器重新渲染dom,然后返回继续等待更多事件。 当浏览器调用js代码不在angular执行上下文时,意味着angular无法发现模型修改。...监听指令,像是ng-click,注册一个监听器dom上。当dom监听器触发,这个指令将执行相关表达式并且更新视图使用$apply方法。...一个显式调用只有实现自定义事件调用使用,或在工作第三方。 进入Angular执行上下文通过调用scope....watch列表是一个自从最后一次便利表达式里修改集合。如果有一个修改被检测到了,那么watch函数调用用于更新dom为新值。

13.2K20

【17】进大厂必须掌握面试题-50个Angular面试

Angular指令是什么? Angular核心功能是指令,这些属性使您可以编写 特定于应用程序新HTML语法。它们本质上是Angular编译器DOM中找到它们时执行函数。...Angular,数据绑定是最强大,最重要功能之一,可让您定义组件与DOM(文档对象模型)之间通信。它从根本上简化了定义交互式应用程序过程,而不必担心视图或模板与组件之间推送和提取数据。...Angular组件具有离散生命周期,其中包含从出生到死亡过渡不同阶段。为了更好地控制这些阶段,我们可以使用以下方法将其连接: 构造函数: 通过类上调用new创建组件或指令时将调用它。...Angular,摘要过程称为脏检查。之所以调用它,是因为它扫描整个范围以进行更改。换句话说,它将所有新作用域模型值与以前作用域值进行比较。...42.Angular链接和编译有什么区别? 编译功能用于模板DOM操纵并收集所有指令。 链接功能用于注册DOM侦听器以及实例DOM操作,并在克隆模板执行。 43.

41.1K51

【笔记】AngularJs学习笔记【实践回顾与知识点归纳】

-- ng-repeat为items数组每个元素拷贝一个这个divDOMdiv每次拷贝,同时设置一个叫item属性代表当前元素 --> 删除 其次,我们scope创建数据时候,应该使用“模型对象”方式来包含数据,这样能避免scope对象中原型继承引起非预期行为。...; angualr加载到页面,等待页面完全加载完成,然后寻找ng-app定义模板边界; angular经过模板寻找标识符和捆绑,监听器和DOM操作完成了注册。...如此下来,用angular结构化应用,将应用程序模板和填充它们数据分离啦爽吧~ 这样一来,模板可缓存,第一次加载只有新数据加载到浏览器,提升了浏览器性能。

20530

【笔记】AngularJs学习笔记【实践回顾与知识点归纳】

-- ng-repeat为items数组每个元素拷贝一个这个divDOMdiv每次拷贝,同时设置一个叫item属性代表当前元素 --> 删除 其次,我们scope创建数据时候,应该使用“模型对象”方式来包含数据,这样能避免scope对象中原型继承引起非预期行为。...; angualr加载到页面,等待页面完全加载完成,然后寻找ng-app定义模板边界; angular经过模板寻找标识符和捆绑,监听器和DOM操作完成了注册。...如此下来,用angular结构化应用,将应用程序模板和填充它们数据分离啦爽吧~ 这样一来,模板可缓存,第一次加载只有新数据加载到浏览器,提升了浏览器性能。

24540

美团前端一面必会react面试题4

注意:避免 循环/条件判断/嵌套函数 调用 hooks,保证调用顺序稳定;只有 函数定义组件 和 hooks 可以调用 hooks,避免 类组件 或者 普通函数 调用;不能在useEffect...source参数时,默认每次 render 时都会优先调用上次保存返回函数再重新调用;useEffect(() => { // 组件挂载执行事件绑定 console.log...用法与useEffect类似,只是区别于执行时间点不同useEffect属于异步执行,并不会等待 DOM 真正渲染执行,而useLayoutEffect则会真正渲染才触发;可以获取更新 state...componentDidMount方法代码,是组件已经完全挂载到网页上才会调用被执行,所以可以保证数据加载。此外,在这方法调用setState方法,会触发重新渲染。... EMAScript5语法规范,关于作用域常见问题如下。(1)map等方法函数,要绑定作用域this(通过bind方法)。

3K30

Vue 面试题汇总

()通知时,能调用自身 update() 方法,并触发Compile绑定,则功成身退。...销毁前/ 执行destroy方法,对data改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom绑定,但是dom结构依然存在 vuex 面试题 1、有哪几种属性 有 5 种...更新前/:当data变化时,会触发beforeUpdate和updated方法 销毁前/执行destroy方法,对data改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom...特点:hash虽然URL,但不被包括HTTP请求;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。...可以具此优化 vue-cli 生产环境部署静态资源,提升 页面 加载速度 15 NextTick nextTick可以让我们在下次 DOM 更新循环结束之后执行延迟回,用于获得更新 DOM

3K30

前端vue面试题2020及答案_c++ 面试题

58.nextTick 使用场景和原理 nextTick 是在下次 DOM 更新循环结束之后执行延迟回修改数据之后立即使用这个方法,获取更新 DOM。...then方法中注册成功函数,通过箭头函数作用域特征,可以直接访问组件实例化对象,存储返回数据。 69. 如何在 Vue. js循环插入图片? 对“src”属性插值将导致404请求错误。...$nextTick理解 用法: 在下次 DOM 更新循环结束之后执行延迟回修改数据之后立即使用这个方法,获取更新 DOM。 为什么?...所以为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回函数将在 DOM 更新完成调用。...3、如果加载完之后会调factory函数传入resolve和reject两个参数,执行返回一个成功回调和失败,promise成功了就会调resolve; 4、resolve中就会调取forceRender

4.2K10

前端一面经典react面试题(边面边更)

useEffect和useLayoutEffect区别useEffect 基本上90%情况下,都应该用这个,这个是render结束,你callback函数执行,但是不会block browser...componentDidMount方法代码,是组件已经完全挂载到网页上才会调用被执行,所以可以保证数据加载。此外,在这方法调用setState方法,会触发重新渲染。...setState 第二个参数是一个可选函数。这个回函数将在组件重新渲染执行。等价于 componentDidUpdate 生命周期内执行。...注意:避免 循环/条件判断/嵌套函数 调用 hooks,保证调用顺序稳定;只有 函数定义组件 和 hooks 可以调用 hooks,避免 类组件 或者 普通函数 调用;不能在useEffect...source参数时,默认每次 render 时都会优先调用上次保存返回函数再重新调用;useEffect(() => { // 组件挂载执行事件绑定 console.log

2.2K40

前端面试题及答案(二)

1. ng-show/ng-hide 与 ng-if区别? 我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示。而ng-if实际上控制dom节点增删除来实现。...因此如果我们是根据不同条件来进行dom节点加载的话,那么ng-if性能好过ng-show. 2. 表达式 {{yourModel}}是如何工作?...它依赖于 $interpolation服务,初始化页面html,它会找到这些表达式,并且进行标记,于是每遇见一个{{}},则会设置一个$watch。...而$interpolation会返回一个带有上下文参数函数,最后该函数执行,则算是表达式$parse到那个作用域上。 3. Angulardigest周期是什么?...scope,@,=,&进行值绑定时分别表示 @获取一个设置字符串,它可以自己设置也可以使用{{yourModel}}进行绑定; = 双向绑定,绑定scope上一些属性; & 用于执行父级scope

65010

Vue面试核心概念

vue-router单页面应用,路径之间切换实际上是组件之间切换。...自身必须有一个update()方法待属性变动dep.notice()通知时,能调用自身update()方法,并触发Compile绑定,则功成身退; 14. vue.cli项目中目录src目录每个文件夹和文件用法...(1) 封装浏览器XMLHttpRequest对象; (2) 发出 http 请求; (3) 支持 Promise API,解决回函数嵌套问题; (4) 提供拦截器,拦截请求和响应实现统一处理;...17.created 和mounted 区别 created 是实例创建完成之后钩子函数模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。...mounted是将编译好HTML挂在到页面完成执行钩子函数整个生命周期中只执行一次;模板渲染成html调用,通常是初始化页面完成,再对htmlDOM节点进行一些需要操作。

17610

Vue 面试题

(载入前),挂载开始之前被调用,相关render函数首次被调用。...updated(更新),由于数据更改导致虚拟DOM重新渲染和打补丁之后调用调用时,组件DOM已经更新,所以可以执行依赖于DOM操作。...特点:hash虽然URL,但不被包括HTTP请求;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。...2、与React区别 相同点:React采用特殊JSX语法,Vue.js组件开发也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译使用;中心思想相同:一切都是组件,组件实例之间可以嵌套...;都提供合理钩子函数,可以让开发者定制化地去处理需求;都不内置列数AJAX,Route等功能到核心包,而是以插件方式加载组件开发中都支持mixins特性。

1.5K42

React常见面试题

服务端渲染),componentWillMount生命周期会执行两次,导致多余请求 react16进行fiber重写,componentWillMount 可能在一次渲染多次调用 react17...【hook执行位置】不要在循环、条件 、嵌套有hook,必须始终react函数顶层使用Hook,这是因为react需要利用调用顺序来正确更新相应状态,以及调用相应钩子函数,否则会导致调用顺序不一致性...useRef:获取组件实例,返回一个可变ref对象,返回ref对象组件整个生命周期内保持不变 useLayoutEffect: 它会在所有DOM变更同步调用effect useDebugValue...useEffect可以让你在函数组件执行副使用(数据获取,设置订阅,手动更改React组件DOM)操作 默认情况下每次函数加载完,都会执行(不要在此修改state,避免循环调用),useEffect...生命周期) 由于添加/删除订阅代码紧密性,所以useEffect设计同一个地方,如果effect返回一个函数,react将会在执行清除时调用它 使用场景: 订阅外部数据源(防止数据泄露) 设置页面标题

4.1K20

前端面试题 --- Vue部分

$nextTick()将回延迟到下次 DOM 更新循环之后执行。修改数据之后立即使用它,然后等待 DOM 更新。...它跟全局方法 Vue.nextTick 一样,不同是回 this 自动绑定到调用它实例上。...调用全局 afterEach 钩子。 触发 DOM 更新。 调用 beforeRouteEnter 守卫传给 next 函数,创建好组件实例会作为回函数参数传入。...mixin 项目变得复杂时候,多个组件间有重复逻辑就会用到mixin 如果希望多个组件之间重用一组组件选项,例如生命周期 hook、 方法等,则可以将其编写为 mixin,并在组件简单用它。...修改数据之后立即使用这个方法,获取更新DOM。使用场景是:可以created钩子函数拿到dom节点 nextTick 是在下次 DOM 更新循环结束之后执行延迟回

1.9K20

阿里前端二面必会react面试题总结1

注意:避免 循环/条件判断/嵌套函数 调用 hooks,保证调用顺序稳定;只有 函数定义组件 和 hooks 可以调用 hooks,避免 类组件 或者 普通函数 调用;不能在useEffect...source参数时,默认每次 render 时都会优先调用上次保存返回函数再重新调用;useEffect(() => { // 组件挂载执行事件绑定 console.log...用法与useEffect类似,只是区别于执行时间点不同useEffect属于异步执行,并不会等待 DOM 真正渲染执行,而useLayoutEffect则会真正渲染才触发;可以获取更新 state...Reactprops为什么是只读?this.props是组件之间沟通一个接口,原则上来讲,它只能从父组件流向子组件。React具有浓重函数式编程思想。提到函数式编程就要提一个概念:纯函数。...componentDidMount方法代码,是组件已经完全挂载到网页上才会调用被执行,所以可以保证数据加载。此外,在这方法调用setState方法,会触发重新渲染。

2.7K30
领券