Angular 学习笔记 3

最新推荐文章于 2023-06-14 11:52:11 发布

散热无奈

最新推荐文章于 2023-06-14 11:52:11 发布

阅读量560

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/ivolianer/article/details/41787161

版权

AngularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

诸如 ng-controller ，ng-repeat，它们都被称之为 directive。

第一个 directive，helloworld。

    angular.module('myApp', [])
            .directive('helloworld', function () {
                return {
                    restrict: 'E',
                    replace: true,
                    template: '<div>Hi, this is my first directive.</div>'
                }
            });

<body ng-app="myApp">
<helloworld></helloworld>
</body>

第二个 directive, hellowhat。

    angular.module('myApp', [])
            .directive('hellowhat', function () {
                return {
                    restrict: 'E',
                    replace: true,
                    template: '<div>Hi, {{what}}.</div>',
                    scope: {
                        what: '@'
                    }
                }
            });

<body ng-app="myApp">
<hellowhat what="Linda"></hellowhat>
</body>

这里 directive 使用了独立的 scope，而不是访问外部的 scope。

@ 表示 what 的值有 directive 的 what 属性传递进来。

实战一下，alert Demo。

http://v3.bootcss.com/components/#alerts。

然后

    angular.module('myApp', [])

            .directive('alert', function () {
                return {
                    restrict: 'E',
                    replace: true,
                    template: '<div class="alert alert-{{type}}">{{value}}</div>',
                    scope: {
                        type: '@',
                        value: '@'
                    }
                }
            })

            .controller('myCtrl', function ($scope) {
                $scope.classes = [
                    "success",
                    "info",
                    "danger",
                    "warning"
                ]
            })

    ;

<body ng-app="myApp">
<head>
    <link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<div ng-controller="myCtrl">
    <alert ng-repeat="class in classes"
           type="{{class}}" value="{{class}}">
    </alert>
</div>
</body>

好吧，已经很酷了，但是还是有些问题。

第一，从习惯上讲，

<alert>value</alert>

的写法更符合人们的习惯。

第二，bootstrap 使用 jquery 能够实现可关闭的警告框。

那么

angular.module('myApp', [])

            .directive('alert', function () {
                return {
                    restrict: 'E',
                    replace: true,
                    transclude: true,
                    template: '<div ng-hide="isClosed()" class="alert alert-{{type}}">' +
                    '<button class="close" ng-click="close()"><span aria-hidden="true">×</span></button>' +
                    '<div ng-transclude></div>' +
                    '</div>',
                    scope: {
                        type: '@'
                    },
                    controller: function ($scope) {
                        $scope.closed = false;
                        $scope.isClosed = function () {
                            return $scope.closed;
                        };
                        $scope.close = function () {
                            $scope.closed = true;
                        }
                    }
                }
            })

            .controller('myCtrl', function ($scope) {
                $scope.classes = [
                    "success",
                    "info",
                    "danger",
                    "warning"
                ]
            })

    ;

<body ng-app="myApp">
<head>
    <link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<div ng-controller="myCtrl">
    <alert ng-repeat="class in classes"
           type="{{class}}" value="{{class}}">
    </alert>
</div>
</body>

第一个问题，是通过 transclude 来实现的。

transclude 表示将 directive 内部的节点，替换到模板中 ng-transclude 标记的节点内。

第二个问题，则是通过 ng-hide ng-click 等内置 directive 实现的。

散热无奈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular 学习笔记 3

诸如 ng-controller ，ng-repeat，它们都被称之为 directive。helloworld angular.module('myApp', []) .directive('helloworld', function () { return { restrict
复制链接

扫一扫

专栏目录