AngualrJS学习--directive

1.directive的作用：

自定义一个标签来实现一些特定的功能，或者显示想要的数据。比如想封装一个时间控件到指令中，通过在html代码中使用

<时间控件></时间控件>

就可以代用时间控件的功能，不用每次都写重复的代码。

还可以把一些复杂的操作或者在JS中不好实现的逻辑写在指令中，简化开发复杂度。

比如bootstrep的时间控件直接写到angualrJS中，当值变化时并不会出发ng-change()函数，这样model也不会更新。当把时间控件封装到指令中后就可以实现这一操作。下面就演示如何实现。

2.directive用法（复制自菜鸟教程http://www.runoob.com/angularjs/angularjs-directives.html）：

 
 
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

3.Angualr自带的directive：

很多。。。

4.自定义directive：

1）.angualr api的实例

效果图：

在页面上显示时间，并精确到秒，可以通过改变时间格式改变输出的时间

html源码：

<div ng-controller="DController">
    
    Date format: <input ng-model="format"><hr/>
    Current time is: <span my-current-time="format"></span><hr/>

    <datapicker myvalue="times" ng-model="times" format="yyyy-mm-dd hh:mm:ss" on-closed="updateValue()"></datapicker>
    <br>controller--date&&time:  {{times}}

</div>

JS源码：

加了点简单注释，不难看懂

app.controller('DController', ['$scope', function ($scope) {
        $scope.format = 'M/d/yy h:mm:ss a';
        $scope.times = "0";
        $scope.updateValue = function () {
            console.log("===="+$scope.times);
        }

    }]);

    app.directive('myCurrentTime', ['$interval', 'dateFilter', function ($interval, dateFilter) {

        function link(scope, element, attrs) {
            var format, timeoutId;

            function updateTime() {
                element.text(dateFilter(new Date(), format));
            }

            // watch 监控formate的变化
            scope.$watch(attrs.myCurrentTime, function (value) {
                format = value;
                updateTime();
            });

            //when an AngularJS scope is destroyed, it broadcasts a $destroy event to listening scopes.
            element.on('$destroy', function () {
                $interval.cancel(timeoutId);
            });

            // start the UI update process; save the timeoutId for canceling
            // $interval处理间歇性工作
            timeoutId = $interval(function () {
                updateTime(); // update DOM
            }, 1000);
        }

        return {
            link: link
        };
    }]);

2）.定义指令封装时间控件

效果图：
选择时间后改变model的值，并显示

html源码：
 <datapicker myvalue="times" ng-model="times" format="yyyy-mm-dd hh:mm:ss" on-closed="updateValue()"></datapicker>
    <br>controller--date&&time:  {{times}}


JS源码
    app.controller('DController', ['$scope', function ($scope) {
        $scope.times = "0";//定义外边的时间
        $scope.format = 'M/d/yy h:mm:ss a';
        $scope.updateValue = function () {
            console.log("===="+$scope.times);
        }

    }]);
    app.directive('datapicker', ['$interval', 'dateFilter', function ($interval, dateFilter) {
        function link(scope, element, attrs) {
            function intMyselef() {
                console.log(attrs.format);
                $('#datetimepicker').datetimepicker({
                    format: attrs.format,
                }).on('changeDate', function(ev){
                    //ev.date 是实际的时间，时间格式化后赋值给输入框
                    scope.datetime = dateFilter(ev.date,"yyyy-MM-dd hh:mm:ss");
                });
            };
            //调用函数初始化控件
            intMyselef();
            //使用watch方法，当datetime的值变化是改变model的值
            scope.$watch('datetime', function (newval,oldval) {
                scope.datetime = newval;
            });
        }
        return {
            //使用方法
            restrict: 'E',
            //是否把值传递给上级scope,当页面和js中同时设置时才有用
            transclude: true,
            //指令模板，可以是字符串表示的html代码，也可以是html链接
            template: '<div>' +
                            '控件----<input type="text" value="" id="datetimepicker" ng-model="datetime"><br><br>' +
                            '<br><br>dretive--date&&time:{{datetime}}' +
                      '</div>',
            //要返回的link
            link: link,
            //指令中的scope,可有可无，可以用于绑定上级scope中的事件或者model，这里定义了指令里的时间
            scope: {
                //绑定了 <datapicker myvalue="times" ng-model="times" format="yyyy-mm-dd hh:mm:ss" on-closed="updateValue()"></datapicker>中的
                //myvalue="times"
                datetime: '=myvalue'
            }
        };
    }]);





源代码：
https://github.com/HanlaoTwo/StudyAngular/blob/master/Angular%26Directive.html