控制器的作用域

每个控制器都对应一个模型，也就是 $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>