前端angular 题目
1、 Angular Directive中restrict 中分别可以怎样设置？scope中@,=,&有什么区别？
restrict
E(元素)：<directiveName></directiveName>
A(属性)：<div directiveName='expression'></div>
C(类)： <div class='directiveName'></div>
M(注释)：<--directive:directiveName expression-->
一般情况下E/A/C用得比较多。
@
单项绑定的前缀标识符。传递的值必须是字符串且在指令里引用时必须_x0008_加上{{}}
=
双向数据绑定前缀标识符。
&
绑定函数方法的前缀标识符
2、 <div ng-if=”true”><input type='text' ng-model='name'></div>中ng-model失效的原因
在ng-if方式中，每个包含的元素都拥有自己的作用域，因此，复选框元素也拥有自己的$scope作用域。相对于控制器作用域来说，这个作用域属于一个子级作用域，所以，如果它想绑定控制器中的变量值，必须添加$parent标识，只有这样才能访问到控制器中的变量。
因此，解决ng-if中ng-model值无效的问题，主要方法就是在绑定值时添加$parent标识，或者用ng-show指令代替ng-if指令，这两种方法都可以达到同样的页面效果。
3、 列出AngularJs至少三种实现不同模块之间通信方式？
1、Service 插入模块的即服务的名字
2、events,指定绑定的事件
3、使用 $rootScope
4、controller之间直接使用$parent, $$childHead等
5、directive 指定属性进行数据绑定
4、 描述svn代码commit时可能遇到的情况，遇到冲突如何解决，恢复svn上面的某个版本怎么搞（可纸面简要作答）
提交代码时候有冲突；正常提交没有冲突；
有冲突时候的解决办法：
A、放弃自己的更新，使用svn revert（回滚），然后提交。在这种方式下不需要使用svn resolved（解决）
B、放弃自己的更新，使用别人的更新。使用最新获取的版本覆盖目标文件，执行resolved filename并提交(选择文件—右键—解决)。
C、手动解决：冲突发生时，通过和其他用户沟通之后，手动更新目标文件。然后执行resolved filename来解除冲突，最后提交。
自己当前服务器的；修改的结果；当前服务器上的代码即最新的；
通过手动修改来整合代码再提交
5、 ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？
会抛出异常
解决办法：
Ng-repeat =” item in data track by $index” 指定跟踪值唯一可以了
6、 自定义一个过滤器获取数组[2,3,1,5,9,0]中的最大值
过滤器的格式与写法 地址
http://blog.csdn.net/sinat_31057219/article/details/60869966
{{带过滤数据 | 过滤器名：参数1：参数2：参数3.....}}
app.filter('过滤器名', function () {
return function (待过滤数据, 参数....) {
......
return 已过滤数据;
}
数据
$scope.data = [2,3,1,5,9,0];
页面
<div> {{data}}</div>
<div>{{data | myFilter}}</div>
自定义控制器
app.filter('myFilter',function () {
return function (value) {
var max = "";
for(var i=0;i<value.length;i++){
max = value[i];
if( max < value[i]){
max = value[i];
}
i++;
}
return max;
}
})
7、 理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。那么，require.js怎么加载非规范的模块呢？
Require.config({
//baseUrl:用来指定加载模块的目录，如果你在加载js文件中使用绝对路径的时
//候，或者其它相对路径时，可以不写
//paths，是指定模块的加载路径。
baseUrl:’./’,
Path:{
‘ionic’: ‘js/app’
},
//shim:是配置不兼容的模块。这里用来配置前面讲的不符合AMD规范的模块。
Shim:{
'echarts':{
exports:"echarts"
},
'app': {
deps: ['ionic']
},
},
deps: [
'bootstrap'
]
})
,//这里的exports就是模块的返回值，main.js中的exports的值，一定与routeTwo.js中暴露的全局变量的值一致，因为前面的routeTwo.js中的全局变量就是routeTwo，显然routeTwo.js模块的返回值，就是暴露的全局变量window.routeTwo，requirejs就是将这些全局变量的值返回，作为模块的返回结果，如果routeTwo.js中暴露了多个全局变量，那么require可能将任何一个返回。不过一般只有一个全局变量，这样冲突的可能性会减少，毕竟全局变量越少越好。
8、 请解释一下relative、fixed、absolute和static元素的区别？请解释一下inline和inline-
relative:有自己的位置
absolute:没有自己的位置了
block的区别？Display的
Inline ：只能作为行内元素来使用
inline-block：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
出现问题块内有间隙是字符的原因解决方法：font-size:0的空隙
什么是文档流？
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流，分别是：浮动,绝对定位和相对定位。
Position的
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
Relative：相对定位，定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式
Fixed：固定到页面就不变了
Absolute：绝对定位，定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。 ，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，
Static：什么效果都没有
9、 CSS实现垂直水平居中
第一种：
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
margin-top: -150px; //宽度的一半负数
}
第二种css3D的设置：
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);
}
第三种flex的设置
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}
10、 用css3实现一段动画：
当鼠标经过某个背景颜色为红色，宽高都为100px，id为test的div时，该div的背景颜色逐渐变为yellow，宽度逐渐变为150px
<style>
html,body{
margin: 0;
padding:0;
}
#test{
width: 100px;
height: 100px;
margin: 0 auto;
transition:width 3s;
background-color: red;
transition:background-color 3s;
}
#test:hover{
width: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="test">电价为</div>
</body>
自己补充
面试题网址http://www.mamicode.com/info-detail-1690695.html
1 ng-show/ng-hide 与 ng-if的区别？
我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show.
2.解释下什么是$rootScrope以及和$scope的区别？
通俗的说$rootScrope 页面所有$scope的父亲。
3. 自定义一个指令的写法与形式，过滤器的写法，服务的写法
4. 自定义服务
http://blog.csdn.net/zcl_love_wx/article/details/51404390
Angular常用的路优库
2者路由有什么区别？
angular 中的 ui-router与ngRoute的区别
2者的使用都需要在ui中用ui-view指令置顶
常用的路由ngRoute ui.router
路由的设置：
$stateProvider,$urlRouterProver
$stateProver.state()
Define（【‘app’】,function(app){
App.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state(“”,{
})
})
}）
延时的定时器如何取消，$tiemout.cancel( $timeout的名字)
Angular 中digest周期是什么？
面试其他的内容测试：
Complie 与link的d的区别于练习怎么样优化他的性能
Apply与digest的区别
Apply会进入到$rootscope
Digest会进入到$scope,和他的儿子$scope，二者主要是这些区别
Ng-if 与ng-show的区别详细的解释是作用域的问题
Angular的服务的serviced 解释的例子网络地址
一个服务职能实例化一个对象factory 与service 的代码一下是等价的书写形式，意义上是相一致的
服务的5中形式
将对象转化成数组的方式的解决办法：
Angular 中设置constanct的方式：
Var 的形式
Constact的形式
用angular 的value
11.7日的测试题目
1.阻止ng-click冒泡事件怎么阻止？ $event.stoppropagation()
2.White-space=norap 文字在一行
3.Angular会在加载前出现闪烁的问题，怎么解决
ng-bind=”” 或是
class=”ng-hide” 样式添加 .ng-hide:{display:none}
4.Ng-if ng-show的具体区别 对子对象作用域也可以进行双向绑定
测试题目：
<p>{{name}}</p>
<div ng-if="true">
<input type="text" ng-model="name">
</div>
<br>
<p>{{name}}</p>
<div ng-show="true">
<input type="text" ng-model="name">
</div>
<br>
<p>{{parent.name}}</p>
<div ng-if="true">
<input type="text" ng-model="parent.name">
</div>
5.手机端 使用原生的滑块滚动条，怎样禁止使用滚动条
Overflow-scroll=”false” scroll=”false”
数据绑定采用的是什么机制？
脏检查机制。
双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。
原理就是，Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发，遍历所有的 $watch，最后更新 dom。
举个栗子
<button ng-click="val=val+1">increase 1</button>
click 时会产生一次更新的操作（至少触发两次 $digest 循环）
按下按钮
浏览器接收到一个事件，进入到 angular context
$digest 循环开始执行，查询每个 $watch 是否变化
由于监视 $scope.val 的 $watch 报告了变化，因此强制再执行一次 $digest 循环
新的 $digest 循环未检测到变化
浏览器拿回控制器，更新 $scope.val 新值对应的 dom
$digest 循环的上限是 10 次（超过 10次后抛出一个异常，防止无限循环）。
关于指令的详细描述
在指令中的controller和link2个函数的
由此我们可以基本得出在controller和link中应该写什么代码的结论：
（1）在controller写业务逻辑（我们明白业务逻辑大部分是放在服务中），这里所说的业务逻辑乃是为呈现视图之前而准备的数据或者是与其他指令进行数据交互而暴露这个api。
（2）在link中主要操作DOM。
关于自定义指令的解释地址，发现挺好的
https://www.cnblogs.com/ermu-learn/p/5913760.html
离别是为了下一的重逢
关于replace 的例子说明
复制代码
// 衔接上面的代码
m1.directive('testDirective', function() {
// 将对象return出去
return{
restrict: 'E',// 指令类型 E：element A：attribute M：comment C: class
template: '<div>我是指令生成的内容</div>';
replace: true, //使用模板替换原始标记 指令内原本的数据将被清空
}
});
angular.bootstrap(document.body,['module1']);
复制代码
复制代码
对应的html可以这样写：
<body>
<div ng-controller="ctl1">{{content}}
<test-directive>这是原本的内容</test-directive>
</div>
</body>
理解：就是替代了原来的标签