前端面试题及答案（二）

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. Angular中的digest周期是什么？

每个digest周期中，angular总会对比scope上model的值，一般digest周期都是自动触发的，我们也可以使用$apply进行手动触发。更深层次的研究，可以移步The Digest Loop and apply。

4. Angular Directive中restrict 中分别可以怎样设置？scope中@,=,&有什么区别？

restrict中可以分别设置:

• A匹配属性
• E匹配标签
• C匹配class
• M 匹配注释

当然你可以设置多个值比如AEC,进行多个匹配。

在scope中，@,=,&在进行值绑定时分别表示

• @获取一个设置的字符串，它可以自己设置的也可以使用{{yourModel}}进行绑定的;
• = 双向绑定，绑定scope上的一些属性；
• & 用于执行父级scope上的一些表达式，常见我们设置一些需要执行的函数

代码语言：javascript复制

angular.module('docsIsolationExample', [])  
.controller('Controller', ['$scope', function($scope) {
 $scope.alertName = function() {
     alert('directive scope &');
 }
}])
.directive('myCustomer', function() {  return {
   restrict: 'E',
   scope: {
     clickHandle: '&'
   },
   template: '<button ng-click="testClick()">Click Me</button>',
   controller: function($scope) {     $scope.testClick = function() {
       $scope.clickHandle();     }  
   }
 };
});

代码语言：javascript复制

<div ng-app="docsIsolationExample">  <div ng-controller="Controller">  
 <my-customer click-handle="alertName()"></my-customer></div>   </div>

Codepen Demo

• < 进行单向绑定。

angularjs

0 人点赞