angular组件scope作用域

angular中组件可以是指令，指令也可以是组件

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>angular.js</title>
</head>
<body>
    <div ng-controller="myCtrl">
        <p>作为组件：<ng-naruto></ng-naruto></p>
        <p>作为指令：<span ng-naruto></span></p>
        <p style="border-top:2px solid red">{{name}}</p>
        <p><input type="text" ng-model="name"></p>
        <first></first>
        <second></second>
        <third></third>
    </div>
</body>
<script src="jquery.js"></script>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script>
    var app = angular.module('myApp',[]);
    app.controller('myCtrl',['$scope',function($scope){
        $scope.name = 'naruto';
    }])

    // 自定义指令（命名使用驼峰）
    app.directive('ngNaruto',function(){
        return {
            restrict:'ECMA',
            template:'<p>自己创建的组件/指令{{name}}</p>',
        }
    })
    app.directive('first',function(){
        return {
            scope:false,//默认值，共享父级的作用域
            template:'<p>first name:{{name}}</p>',
            link:function(scope,ele,attr){
                ele.on('click',function(){
                    console.log(ele);//[first, context: first]
                    ele.css('color','red');
                })
                scope.name = '张三'
            }
        }
    }).directive('second',function(){
        return {
            scope:true,//继承父级的作用域并创建自己的作用域
            // 当修改这里的name时，second会在自己的作用域中新建一个name变量，与父级作用域中的name相对独立，所以再修改父级中的name对second中的name就不会有影响了
            template:'<p>second name:{{name}}</p>',
            link:function(scope,ele,attr){
                scope.name = '李四'
            }
        }
    }).directive('third',function(){
        return {
            scope:{},//创建指令自己的独立作用域，与父级毫无关系
            template:'<p>third name:{{name}}</p>',
            link:function(scope,ele,attr){
                scope.name = 'yy'
            }
        }
    })
</script>
</html>

PS:

restrict:ECMA(restrict默认值是EA)
E:Element---元素名
C:Class---类名
M:Commet---注释
A:Attribute---属性

效果图如下： view

Narutocc / angular

angular组件scope作用域 #6

angular中组件可以是指令，指令也可以是组件