angular directive详解

还是大漠穷秋的一个简单demo，在这里我写了一些详细的注释有助于你的理解

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .expander {
            border: 1px solid black;
            width: 250px;
        }

            .expander > .title {
                background-color: black;
                color: white;
                padding: .1em .3em;
                cursor: pointer;
            }

            .expander > .body {
                padding: .1em .3em;
            }
    </style>
    <script src="js/angular.min.js"></script>
</head>
<body>
    <div ng-app="myapp">
        <hello></hello>
        <span>第二个例子</span>
        <div ng-controller="somecontroller">
            <expander class="expander" expander-title="title">
                  {{text}}
            </expander>
        </div>
    </div>
  
    <script>
        var app = angular.module("myapp", []);
        app.directive("expander", function () {
            return {
                restrict: 'EA',
                transclude: true,
                replace: true,
                //scope:false指的是现有的scope  scope:true指一个新的的scope scope:{}值一个独立的scope
                //默认情况下是不可以访问父scope模型中的任何东西 但是你可以指定把某些属性传递到你的指令中，你可以把这些属性名称看
                //成函数的形参 虽然独立的scope不会继承模型的属性，但是它们仍然是父scope的孩子 它们带有一个指向父scope对象的$parent属性
                //大多数人在这里看不懂 这里的意思是什么呢
                //绑定策略有三种 分别为@、=、&
                //@ 表示把当前属性作为字符串传递。你还可以绑定来自外层scope的值 在属性值中插入{{}}即可
                //= 表示绑定当前属性，它带有一个来自指令父scope的属性
                //$ 传递一个来自父scope的函数，稍后调用
                //我们的这个 title:'=expanderTitle'表示 创建scope的一个局部属性，名为title,它与父scope中的一个定义在expander-title中
                //的属性绑定。这里，为了方便起见，我们把title重命名成expanderTitle。我们可以把scope编写成:{expanderTitle:'='},然后
                //在模板中用expanderTitle来引用它。但是，如果其他指令也带有一个title属性，那么最好在API中删掉title属性，并重新起一个不同
                //的名字，这样就可以在局部空间里面使用它了，当然这里的命名方式与指令自身一样采用了驼峰法则
                //如果你觉得应该把扩展条的标题定义在模板中，而不应该定义在数据模型中，那么你可以在scope的定义中使用字符串风格的属性
                //用@符号作为标志进行传递 实例如下 
                //    scope: { title: '@expanderTitle' },
                //    在模板中，我们可以使用下面这种方法达到同样的效果
                //     <expander class='expander' expaner-title='点击展开'>{{text}}</expander>
                //当然 我们也可以使用双花括号插值语法把title绑定到控制其scope上
                //<expander class='expander' expaner-title='{{title}}'>{{text}}</expander>
                scope:{
                    title:'=expanderTitle'
                },
                template: '<div>'
                  + '<div class="title" ng-click="toggle()">{{title}}</div>'
                  + '<div class="body" ng-show="showMe" ng-transclude></div>'
                  + '</div>',
                link: function (scope, element, attrs) {
                    scope.showMe = false,
                    scope.toggle = function toggle() {
                        scope.showMe = !scope.showMe;
                    };
                }
            }
        });
        app.controller("somecontroller", function ($scope) {
            $scope.title = "点击展开";
            $scope.text = "这里是内部的内容。";
        });
        app.directive("hello", function () {
            return {
                //指令生明方式指令选项 e代表元素 ，a代表属性，c代表样式类，M 代表注释
                restrict: 'E',
                template: '<div>Hi here</div>',
                //是否替换
                replace: true
            };
        });
    </script>
</body>
</html>


有关操作DOM元素的明天在写吧

posted @ 2014-03-14 00:52  生有涯而知无涯  阅读(328)  评论(0)    收藏  举报