自定义指令

一个定时器的指令例子：
html

<div ng-app="app" ng-controller="ctrl">
    <input type="text" ng-model="beginOption">
    <time-device time-begin="beginOption"></time-device>
</div>

js

angular.module('app', [])
    .directive('timeDevice', function ($interval)
    {
        return {
            restrict: 'AE',
            replace: true,
            scope: {
                timeBegin: '='
            },
            template: '<div><i>图标 </i>{{ time }} </div>',
            link: function ($scope, $element, $attrs)
            {
                $scope.time = 0;//初始时间0
                $scope.$watch('timeBegin', function (newV, oldV)
                {
                    console.log('newV:' + newV);
                    console.log('oldV:' + oldV);
                    if (newV == 1)
                    {//表单值变为2时启动定时器
                        $scope.go = $interval(function ()
                        {
                            $scope.time++;
                        }, 1000)
                    }
                    else if (newV == 0)
                    {
                        //先保存到新变量里再重置
                        $scope.time = 0;
                        $interval.cancel($scope.go);
                    }
                });
            }
        }
    })
    .controller('ctrl', function ($scope)
    {
        $scope.beginOption = 2;
    })

效果很简单，当input值为1时，启动定时器，值为0时清除定时器，通过配置beginOption的值，来操作指令内定时器状态。
需要注意的是directive内scope的配置，使timeBegin和beginOption的值双向绑定起来。这样在调用指令时可以不需要改动指令内部代码，只需要操作改变beginOption的值即可操作定时器。