关于Angular中directive的简单应用

最新推荐文章于 2019-07-06 11:03:06 发布

ChauncyWu

最新推荐文章于 2019-07-06 11:03:06 发布

阅读量548

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/ChauncyWu/article/details/60766121

版权

AngularJS 专栏收录该内容

2 篇文章 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. 运行试试

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

ChauncyWu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于Angular中directive的简单应用

用angular中directive方法(自定义插件)，实现一个类似与下拉列表的简单的点击显示案例1.贴出html + js 代码 var app = angular.module("app",[]); app.directive('hello',function(){ return { restrict:'E'
复制链接

扫一扫

专栏目录