2017-5-20 AngularJS 学习笔记
2017-05-20 本文已影响0人
GodlinE
控制器的作用域
- 每个控制器都对应一个模型，也就是 $scope 对象，不同层级控制器下的 $scope 产生了作用域
- 作用域的层级结构对应于 DOM 树结构
- 通过给标签添加 ng-controller 指令，就可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。
根作用域 $rootScope
- 一个 angular 的应用在启动时会创建一个根作用域
$rootScope - 这个根作用域在整个应用范围（ng-app 所在标签以内）都是可以被访问到的
- 使用 ng-init= "属性名称 = 属性值"，创建一个根作用域
作用域原则
- 1.先在当前 dom 节点所对应的作用域查找有没有 name， 如果 angular 返回 name值，则计算渲染
- 2.如果当前作用域中没有，继续去上一级父作用域中去找 name 属性，直到找到为止，如果找到 $rootScope 没有就返回空
- 3.子级可以访问父级的元素
- 4.父级不能访问子级的元素
<body ng-app='app' ng-init="name = 'xmg' ">
<div ng-controller = "fatherController">
<p>{{name}}</p>
<div ng-controller = "xmgController">
<p>{{name}}</p>
</div>
<div ng-controller="xmgController2">
<p>{{name}}</p>
</div>
</div>
</body>
<script src="js/angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('fatherController',['$scope',function(){
$scope.name = 'father';
}]);
app.controller('xmgController',['$scope',function(){
$scope.name = 'sk111';
}]);
app.controller('xmgController2',['$scope',function(){
$scope.name = 'sk2222';
}])
</script>
自定义指令
-
Angularjs 允许根据实际业务需要自定义指令，通过 angular 全局对象下的 directive 方法实现
-
自定义指令，给原生 html 标签添加新属性，属性名称自己定义，属性功能也自己定义
-
第一个参数：指令名称
-
第二个参数：回调函数，返回一个对象，这个对象就是自定义指定的相关内容
-
return 对象参数
-
restrict:'ECMA' 指令类型
E:element
A:attribute
C:class
M:mark (注释形式) -
template ： 指令模版
-
replace ： 是否替换原有标签（bool）
-
注意：只要不用模型中的数据，可以不绑定控制器，但是用到 ng-指令 必须绑定模块
-
问题：自定义指令， restrict 属性在什么情况下使用原宿命，什么情况下使用 属性名？
-
当创建一个含有自己模版的组件的时候，建议使用原宿命，如果仅仅向为已有的元素添加功能，建议使用属性名
<body ng-app='app' ng-controller='xmgController'>
<xmg>
<p ng-transclude>自定义指令内容</p>
</xmg>
<p xmg></p>
</body>
<script>
var app = angular.module('app',[]);
app.controller('xmgController',['$scope',function(){
}]);
app.directive('xmg',function(){
return {
restrict:'EA',
template:'<h1>我是一个自定义指令模版<p>p标签</p></h1>'，
replace:true,
//replace 为 false 时，不替换，将模版添加到自定义指令标签内部
transclude:true
}
})
</script>
-
transclude 指令, 需要在模版标签里使用 ng-transclude，代表将内容添加到模版的哪个位置
-
templateUrl 指令
templateUrl:'../templateUrl.html'
