AngularJS指令<二>

最新推荐文章于 2024-06-20 20:20:21 发布
chenggou9601
最新推荐文章于 2024-06-20 20:20:21 发布
阅读量139
点赞数
文章标签： javascript json 测试 ViewUI
原文链接：https://my.oschina.net/u/3161974/blog/1417318
版权
<!--指令


1.5 作用域  每一条指令都继承了它的父作用域，也就是传入link函数的schop参数。 AngularJS在指令定义对象中提供了scope键能够完全控制指令元素
          对应的作用域。scope键可以接收一下三种值：
          false 默认值 指令作用域与父元素作用域一致
          true  指令作用域继承于父作用域，不过会创建自己的子作用域。
          object 也能将键值组成的对象传给作用域，AngularJS会创建一个“隔离作用域”该作用域并不继承父作用域中的任何信息。
          =表明HTML属性值将是JSON对象  @表明HTML属性将值将是一个字符串  &表明HTML属性是某个控制器中的函数。

-->
<!--require-->
<html>
<head>
    <title>Zhiling App</title>
    <style>
        .ddd{
            background-color: aqua;
        }
    </style>
</head>
<body ng-app="ngApp">
<div>
    <superman strength>动感超人---力量</superman><!--superman指令  属性strength-->
</div>
<div>
    <superman strength speed>动感超人2----力量+敏捷</superman>
</div>
<div>
    <superman strength speed light>动感超人3----力量+敏捷+发光</superman>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script type="text/javascript">
    var myModule=angular.module('ngApp', []);
    myModule.directive('superman',function () {//创建指令
        return{
            scope:{},//独立scope  使指令之间互不影响  scope数据绑定= @ &
            restrict:'AE',//如何是用指令
            controller:function ($scope) {//与mvc里面的contreller不是一个东西，是指令内部的controller,用来给指令暴露出一组public方法，给外部调用的
                $scope.abilities=[];
                this.addStrength=function () {
                    $scope.abilities.push("strength");
                };
                this.addSpeed=function () {
                    $scope.abilities.push("speed");
                };
                this.addLight=function () {
                    $scope.abilities.push("light");
                };
            },
            link:function (scope,element,attrs) {//处理指令内部事件的
                element.addClass('ddd');
                element.bind("mouseenter",function () {
                    console.log(scope.abilities);
                })
            }
        }
    });
    myModule.directive("strength",function () {
        return{
           require:'^superman',//表示strength指令是依赖于superman指令的，link函数就可以写第四个参数，ag会将
            link:function (scope,element,attrs,supermanCtrl) {//supermanCtrl自动注射到link函数里面的，这样就可以调用superman指令暴露出来的方法了
                supermanCtrl.addStrength();

            }
        }
    });
    myModule.directive('speed',function () {
        return{
            require:'^superman',
            link:function (scope,element,arrs,supermanCtrl) {
                supermanCtrl.addSpeed();
            }
        }
    });
    myModule.directive('light',function () {
        return{
            require:'^superman',
            link:function (scope,element,arrs,supermanCtrl) {
                supermanCtrl.addLight();
            }
        }
    })
</script>
</body>
</html>

<!--scope数据绑定 &  -->
<html>
<head>
    <title>Zhiling App</title>
    <style>
        .ddd{
            background-color: aqua;
        }
        .title{
            background-color: aquamarine;
            cursor: pointer;
        }
        .body{
            background-color: beige;
        }
    </style>
</head>
<body ng-app="ngApp">
<!--&绑定-->
<div ng-controller="MyCtrl">
    <greeting greet="sayHello(name)"></greeting>
    <greeting greet="sayHello(name)"></greeting>
    <greeting greet="sayHello(name)"></greeting>
</div>
<!--@绑定-->
<div ng-controller="MyCtrl2">
    <drink flavor="{{ctrlFlavor}}"></drink>
</div>

<!-- =绑定 -->
<div ng-controller="MyCtrl3">
    Ctrl:
    <br>
    <input type="text" ng-model="ctrFlav">
    <br>
    Directive:
    <br>
    <drinp flav="ctrFlav">
    </drinp>
</div>
<!--自定义指令-->
<div ng-controller="SomeController">
<expander class="expander" expander-title="title">
    {{text}}
</expander>
</div>
<!--指令嵌套-->
<div ng-controller="someController2">
    <accordion>
        <expander2 ng-repeat="expander in expanders" expander-title="expander.title">
            {{expander.text}}
        </expander2>
    </accordion>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script type="text/javascript">
    var myModule=angular.module('ngApp', []);
    <!--&绑定-->
    myModule.controller('MyCtrl',['$scope',function ($scope) {
        $scope.sayHello=function (name) {
            alert("Hello "+name);
        }
    }])
    myModule.directive("greeting",function () {
        return{
            restrict:"AE",
            scope:{  //保证指令之间互不干扰
                greet:'&'//传递一个来自父scope的函数，稍后调用（某个控制器中的函数）
            },
            template:'<input type="text" ng-model="userName"/><br/>'+'<button ng-click="greet({name:userName})">Greeting</button></br>'
        }
    });

    <!--@绑定-->
    myModule.controller('MyCtrl2',['$scope',function ($scope) {
        $scope.ctrlFlavor="百威";
    }])
    myModule.directive("drink",function () {
        return{
            restrict:'AE',
            scope:{
                flavor:'@'//自动绑定字符串  代替link函数
            },
            template:"<div>{{flavor}}</div>",
//            link:function (scope,element,attrs) {
//                scope.flavor=attrs.flavor;
//            }
        }
    });

    <!--=绑定-->
    myModule.controller('MyCtrl3',['$scope',function ($scope) {
        $scope.ctrFlav="baishikeke"
    }])
    myModule.directive("drinp",function () {
        return{
            restrict:'AE',
            scope:{
                flav:'='//双向数据绑定
            },
            template:'<input type="text" ng-model="flav">'
        }
    });
//    自定义指令
    myModule.directive('expander',function () {
        return{
            restrict:"EA",
            replace:true,
            transclude:true,//不覆盖之前有的内容
            scope:{
                title:'=expanderTitle'
            },
            template:'<div><div class="title" ng-click="toggle()">{{title}}</div>'+
                    '<div class="body" ng-show="showMe" ng-transclude></div></div>',//ng-show显示和隐藏控制
            link:function (scope,element,attrs) {
                scope.showMe=false;
                scope.toggle=function () {
                    scope.showMe=!scope.showMe;
                }
            }
        }
    });
    myModule.controller('SomeController',function ($scope) {
        $scope.title='点击展开';
        $scope.text="这里是内容的部分。";
    });

//    指令嵌套
    myModule.directive('accordion',function () {
        return{
            restrict:'EA',
            replace:true,
            transclude:true,
            template:'<div ng-transclude></div>',
            controller:function () {
                var expanders=[];
                this.gotOpened=function (selectedExpander) {
                    angular.forEach(expanders,function (expander) {
                        if(selectedExpander!=expander){
                            expander.showMe=false;
                        }
                    });
                }
                this.addExpander=function (expander) {
                    expanders.push(expander);
                }
            }
        }
    });
    myModule.directive('expander2',function () {
        return{
            restrict:'EA',
            replace:true,
            transclude:true,
            require:'^?accordion',
            scope:{
                title:'=expanderTitle'
            },
            template:'<div><div class="title" ng-click="toggle()">{{title}}</div>'+
            '<div class="body" ng-show="showMe" ng-transclude></div></div>',
            link:function (scope,element,attrs,accordionController) {
                scope.showMe=false;
                accordionController.addExpander(scope);
                scope.toggle=function toggle() {
                    scope.showMe=!scope.showMe;
                    accordionController.gotOpened(scope);
                }
            }
        }
    });
    myModule.controller("someController2",function ($scope) {
        $scope.expanders=[{
            title:'Click me to expand',
            text:'Hi there floks ,I am the content that was hidden but is now shown.'
        },{
            title:'Clixk this',
            text:'I am even better text than you have seen previously'
        },{
            title:'Test',
            text:'Test'
        }
        ]
    })

</script>
</body>
</html>
转载于:https://my.oschina.net/u/3161974/blog/1417318
chenggou9601
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS指令<二>

<!--指令1.5 作用域每一条指令都继承了它的父作用域，也就是传入link函数的schop参数。 AngularJS在指令定义对象中提供了scope键能够完全控制指令元素对应的作用域。scope键可以接收一下三种值： false 默认...
复制链接

扫一扫