1.angular.module('mod1',[ ]) [ ]中可以注入其他模块，可以使这几个模块产生联系
<script src="angular.js"></script>
<script src="mod2.js"></script>
<script src="mod3.js"></script>
<script>
let mod1=angular.module('mod1',['mod2','mod3'])
mod1.controller('mod1_ctr1',($scope)=>{
$scope.a=1
})
</script>
<body>
<div ng-controller="mod1_ctr1">{{a}}</div>
<div ng-controller="mod2_ctr2">{{a}}</div>
<div ng-controller="mod3_ctr3">{{a}}</div>
mod2与mod3写在另两个js文件中，然后引入html(模块名要对应)
mod2的js
let mymod=angular.module('mod2',[])
mymod.controller('mod2_ctr2',($scope)=>{
$scope.a=2
})
要引的就是'mod2'
2.过滤器
<body>
<div ng-controller="c1">
<input type="text" ng-model="day">
{{day|cnDay}}
</div>
</body>
<script>
let myApp = angular.module('app1',[]);
myApp.controller('c1',($scope)=>{
$scope.day = 3;
});
myApp.filter('cnDay',()=>{
return (input)=>{
if(input >=0 && input < 7){
return '星期'+'日一二三四五六'.charAt(input);
}else{
return '没有这个星期？';
}
};
});
</script>
目的：在表达式里加上"|"后面自定义一个过滤器名，可以实现输入的内容被转换为想要的结果，即输入3，可以显示星期三，中文的三。
表达式里写{{***|过滤器名}}
js内:
.filter('过滤器名',()=>{
return (input)=>{
return
}
})
3.自定义指令
<body>
<div ng-controller="c1">
<div zns-welcome></div>
<zns-welcome></zns-welcome>
<p class="zns-welcome"></p>
<!-- directive:zns-welcome -->
</div>
</body>
<script>
angular.module('app',[])
.directive('znsWelcome',()=>{
return {
restrict:'AECM',
template:'<span>大家好</span>',
replace:true
};
})
;
</script>
restrict:
A: Attribute 属性
E: Element 元素
C: Class 类，样式中的class
M: coMment 注释 ： 需要配合 replace:true
template:插入的内容
replace:是否直接替换; 默认值是false
网友评论