angular js 自定义 directive的小例子

东明兄 • 2018-10-04 • 开发笔记 • 2265 阅读
chat 
<!DOCTYPE html>
<html lang="zh" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>diyDirective</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="js/angular_v1.7.2/angular.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .title{
            background-color: #ffbb01;
            color: white;
            font-size: 20px;
            text-align: center;
            cursor: pointer;
            padding: 10px 0;
        }
        .body{
            background-color: #ff5d1f;
            color: white;
            padding: 20px;
        }

        .block{
            width: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>


<div class="block" ng-controller="myController">

    <accordion>

        <expander ng-repeat="expander in expanders" title="{{expander.title}}">

            {{expander.content}}

        </expander>

    </accordion>
</div>


<script>

    var myApp = angular.module("myApp", []);
    myApp.controller("myController", ["$scope", function ($scope) {


        $scope.expanders = [
            {title: "T1", content: "hello  i am  t1"},
            {title: "T2", content: "hello  i am  t2"},
            {title: "T3", content: "hello  i am  t3"},
            {title: "T4", content: "hello  i am  t4"},
            {title: "T5", content: "hello  i am  t5"}
        ];


        $scope.title = "我是来自控制器的标题";
        $scope.text = "我是来自控制器的文本内容";


    }]);

    myApp.directive("accordion", function () {

        return {
            restrict: "AE",
            replace: true,
            transclude: true,
            scope: {
                title: "@"
            },
            template: "<div ng-transclude></div>",
            controller: function () {
                var expanders = [];

                this.gotOpened = function (selectExpander) {
                    angular.forEach(expanders, function (expander) {
                        if (selectExpander !== expander) {
                            expander.showMe = false;
                        }

                    })

                };

                this.addExpander = function (expander) {
                    expanders.push(expander);
                }

            }
        }

    });


    myApp.directive("expander", function () {

        return {
            restrict: "AE",
            replace: true,
            transclude: true,
            require: "^?accordion",
            scope: {
                title: "@"
            },
            template: "<div><div class='title' ng-click='toggle()'>{{title}}</div><div class='body' ng-show='show' ng-transclude></div></div>",
            link: function (scope, element, attrs, accordionController) {
                scope.show = false;
                scope.toggle = function () {
                    scope.show = !scope.show;
                    accordionController.gotOpened(scope);
                }

            }
        }

    })


</script>
</body>
</html>

版权声明：
作者：东明兄
链接：https://blog.crazyming.com/note/612/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
angular js 自定义 directive的小例子
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid……
<<上一篇
下一篇>>
chat