关于Angular中directive的简单应用

我不是女神ヾ 2022-09-27 04:57 144阅读 0赞

用angular中directive方法(自定义插件)，实现一个类似与下拉列表的简单的点击显示案例

1.贴出html + js 代码

<body ng-controller="dirController">
    
    <hello></hello> 
    
    <script src="js/angular.min.js"></script>
    <script>
        var app = angular.module("app",[]);
        app.directive('hello',function(){
            return {
                 restrict:'E', 
                 templateUrl:'view/view1.html',//显示内容放在view.html中
                 replace:false,
                 link : function(scope, element, attrs) {
                    scope.conShow = false;
                    scope.showDiv = function toggle() {
                        scope.conShow = !scope.conShow;
                    }
                    scope.pdd = [
                        {id:1,'name':'AAA'},
                        {id:2,'name':'BBB'},
                        {id:3,'name':'CCC'}
                    ];
    
                    scope.clicked = function(index){
                        scope.conClick = scope.pdd[index].name;
                        scope.conShow = !scope.conShow;
                    }
                }
            };
        });
    
        app.controller('dirController',function($scope){
    
        });
    </script>
    </body>

2. 附上view1.html代码

<div>
        <input type="text" class="label" ng-model="conClick">
        <div class="divTop" ng-click="showDiv()">Click Here!</div>
    
        <div class="conDiv" ng-show="conShow">
            <div ng-repeat="p in pdd">
                <a class="link" ng-click="clicked($index)">{
       {p.name}}</a>
            </div>
        </div>
    </div>

3. 运行试试

看见显示选择框，点击显示选中内容

![20170307155955500][]

![20170307160002219][]

[20170307155955500]: /images/20220708/a5c9cfa095f34c488d8000bdc36654b3.png
[20170307160002219]: /images/20220708/efa1dbbacd2d44399af90184eb2d50ec.png