观察指令控制器的属性改变角度

时间:2017-11-27 19:32:30

标签: angularjs angularjs-directive angularjs-components

我有一个指令,但我在指令控制器中查看属性时遇到问题。

    angular.module('app',[])
.directive('timer1', function () {
    return {
        template: '<div class="timerCont1"><div class="progressBar"></div></div>',
        restrict: 'E',
        replace:true,
        scope: true,
        controller: function ($scope, $element, $attrs) {
            $scope.$watch($attrs.timerevent, function (value) {
                switch ($attrs.timerevent)
                {
                    case "start":
                        $scope.timeoutId = null;
                        $scope.countdown = Number($attrs.timer);
                        $scope.tick();
                        break;
                    case "stop":
                        $scope.stop();
                        break;
                    case "destroy":
                      alert()
                        $scope.stop();
                        $scope.$emit('destroy_pizza', {

                            });

                }

            },true);
            $scope.tick = function () {
                $scope.timeoutId = setTimeout(function () {
                    if ($scope.countdown <= 0) {
                        $scope.$apply(function () {
                            $attrs.$set('timerevent', 'destroy')
                        });
                    }
                    else {
                        $scope.countdown--;

                        $scope.tick();
                    }
                    $scope.$apply();
                }, $attrs.interval);
            };

           $scope.stop =  function () {
                   clearTimeout($scope.timeoutId);
                   $scope.timeoutId = null;

           };

        }
    };
});  

这是我的hTML

<timer1 interval="1000" timerevent="start" timer="10"></timer1>

当我将属性timerevent设置为&#34; destroy&#34;我的手表没有被调用,而属性已成功更新。

0 个答案:

没有答案