内容简介：组件、控制器、服务、指令、过滤器对应项目上的 components、modules、services、xx、filter控制器 ng-controller => create scope
组件、控制器、服务、指令、过滤器
对应项目上的 components、modules、services、xx、filter
控制器 ng-controller => create scope
// 初始化，涉及 scope root 作用域等待
var App = angular.module('app', []);
// 控制器 C 将 M 和 V 绑定(MVC)
App.controller('ctrl', $scope=> {
$scope.data= {};
// 不建议直接用 $scope.message = ''; 改动的话，内存地址改变容易导致ng不能触发监听
$scope.onClick = ()=> {}; // `ng-click="onClick"`
});
双向绑定: ng-model
条件判断: ng-if
、 ng-show
、 ng-hide
循环: ng-repeat
ng-repeat="x in xx" $index, x.xxx
//过滤器
App.filter('xxxx', ()=> text=> textFilter);
`{{ data.message | xxxxFilter }}`
// 搜索 `ng-repeat="x in xxxx | filter: searchText"`
searchText = ['T', {name: 'T'}, {name: 'T', last: 'H'}];
样式选择器 ng-class
, ng-style
下拉列表选项 ng-options
$scope.colors = [
{ name: 'black', color: 'black'},
{ name: 'white', color: 'white'},
]
<div ng-controller="FirstCtrl">
<label>
<select ng-model="colorChoosen" ng-options="color.name for color in colors">
</select>
</label>
</div>
ng-include
和 ng-template
<div ng-include="views/part.html"></div> <div ng-include="template.url"></div> <div ng-include="getUrl()"></div> <ng-include src="views/part.html"></ng-include>
directive
// 名字命名用驼峰，使用用-
App.directive('people', function() {
return {
restrict: 'E', // 类型 element A: attribute, C: class
replace: true, // 是否直接代替顶级标签
template: 'xxx' // `templateUrl`
}
})
.directive('te', function() {
return {
scope: {
// = 对象; @ 文本; & 函数
info: '=' // 从 attr 中获取 info 属性，存储到 scope.info中,, 双向数据绑定，改成@ 为只读.
},
link(scope, element, attrs) {
// scope 作用域
// element 封装过的页面dom。 element.children('h1').addClass('text')
// attrs 传入的所有 attrs
},
transclude: true, // 把 directive 变成一个容器 这里有点像 React.children 的概念，或者vue里面的 slot
template: `xxxxx<div ng-transclude></div>`
}
});
// 这里传入了 data
<div te="data"></div>
ng表单，验证等
作用域广播 broadcasted
父级=>子级； emitted
子级=> 父级
filter 自定义筛选器
data binding 双向绑定
dependency injection 引来注入
ng-src directive 内置指令
event ng-click 事件系统指令
server 注入自定义server
angular.module(‘xxxx’, [])
.factory(‘serverName’, [], fn)
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
