【2017年整理】Angular面试题.docx

Angular面试题 一、ng-show/ng-hide 与 ng-if的区别？ 第一点区别是， ng-if 在后面表达式为 true 的时候才创建这个 dom 节点， ng-show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。 第二点区别是， ng-if 会（隐式地）产生新作用域， ng-switch 、 ng-include 等会动态创建一块界面的也是如此。 这样会导致，在 ng-if 中用基本变量绑定 ng-model ，并在外层 div 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。 p{{name}}/p div ng-if=true ??input type=text ng-model=name /div ng-show 不存在此问题，因为它不自带一级作用域。 避免这类问题出现的办法是，始终将页面中的元素绑定到对象的属性（data.x）而不是直接绑定到基本变量（x）上。 二、解释下什么是$rootScrope以及和$scope的区别？ 通俗的说$rootScrope 页面所有$scope的父亲。 我们来看下如何产生$rootScope和$scope吧。 step1:Angular解析ng-app然后在内存中创建$rootScope。 step2:angular回继续解析，找到{{}}表达式，并解析成变量。 step3:接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在 这个controller函数变成一个$scope对象实例。 三、表达式 {{yourModel}}是如何工作的？ 它依赖于 $interpolation服务，在初始化页面html后，它会找到这些表达式，并且进行标记，于是每遇见一个{{}}，则会设置一个$watch。而$interpolation会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式$parse到那个作用域上。 四、Angular中的digest周期是什么？ 每个digest周期中，angular总会对比scope上model的值，一般digest周期都是自动触发的，我们也可以使用$apply进行手动触发。 五、 如何取消 $timeout, 以及停止一个$watch()? 停止 $timeout我们可以用cancel： var customTimeout = $timeout(function () { // your code }, 1000); $timeout.cancel(customTimeout); 停掉一个$watch： // .$watch() 会返回一个停止注册的函数 function that we store to a variable var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty, function (newVal) { if (newVal) { // we invoke that deregistration function, to disable the watch deregisterWatchFn(); ... } }); 六、Angular Directive中restrict 中分别可以怎样设置？scope中@,=,有什么区别？ restrict中可以分别设置: A匹配属性 E匹配标签 C匹配class M 匹配注释 当然你可以设置多个值比如AEC,进行多个匹配。 在scope中，@,=,在进行值绑定时分别表示 @获取一个设置的字符串，它可以自己设置的也可以使用{{yourModel}}进行绑定的; = 双向绑定，绑定scope上的一些属性； 用于执行父级scope上的一些表达式，常见我们设置一些需要执行的函数 进行单向绑定。 angular.module(docsIsolationExample, []) .controller(Controller, [$scope, function($scope) { $scope.alertName = function() { alert(directive scope ); } }]) .directive(myCustomer, function() { return { restrict: E, scope: { clickHandle: }, template: button n