Angular 学习笔记 3

来源：互联网发布：js获取html data属性编辑：程序博客网时间：2024/06/10 03:23

诸如 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