지시선 컨트롤러에서 속성 변경 각도보기

지시문이 있지만 지시문 제어기에서 속성을 보는 데 문제가 있습니다.지시선 컨트롤러에서 속성 변경 각도보기

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 나는 속성이 성공적으로 업데이트되는 반면, 내 시계가 호출 받고 있지 않습니다 "파괴"하는 속성 TimerEvent를 설정하고

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

간다.

출처

2017-11-27 Pooja.webdev

범위 변수 대신 타이머 구성 요소를 제어하기 위해 특성을 사용하는 이유는 무엇입니까? 당신의 문제를 해결하기위한 답을 쓸 수는 있지만,이 구성 요소의 설계에 대한 전체적인 접근은 현명하지 못한 것처럼 보입니다. 자세한 내용은 [AngularJS 개발자 가이드 - 구성 요소 기반 응용 프로그램 아키텍처] (https://docs.angularjs.org/guide/component#component-based-application-architecture)를 참조하십시오. – georgeawg

또한'replace = true'는 더 이상 사용되지 않습니다. 자세한 내용은 [AngularJS에서 대체되는 이유는 무엇입니까?] (https://stackoverflow.com/questions/24194972/why-is-replace-deprecated-in-angularjs/35545445#35545445)를 참조하십시오. – georgeawg

@georgeawg jquery 플러그인을 포함하는 것을 잊어 버린 것 같습니다. 다음은 작동중인 플 런커입니다. https://plnkr.co/edit/ZYLsDNmH4sYMn2N45dot –

$ watch에서 변경 사항을 얻으려면 $ attrs 대신 범위를 사용하십시오.

angular.module('abc').directive('timer1', function() { 
    return { 
     template: '<div class="timerCont1"><div class="progressBar"></div></div>', 
     restrict: 'E', 
     replace:true, 
     scope: { 
      timerevent:"=", 
      timer:"@", 
      interval:"@" 
     }, 
     controller: function (scope, $element, $attrs) { 
      scope.$watch('timerevent', function() { 
       //this section will be run after chnaging the timerevent 
      },true); 
     } 
    }; 
});

출처

2017-11-27 20:07:34

'replace = true'는 더 이상 사용되지 않습니다. 자세한 내용은 [AngularJS에서 대체되는 이유는 무엇입니까?] (https://stackoverflow.com/questions/24194972/why-is-replace-deprecated-in-angularjs/35545445#35545445)를 참조하십시오. – georgeawg

@georgeawg. replace 속성은 해당 기능을 파괴하지 않습니다. HTML에서 지시어 요소를 삭제하려는 경우 어떻게합니까? –

'replace : true'에는 알려진, 매우 어리석은 문제가 있기 때문에 더 이상 사용되지 않습니다. 그 중 몇 가지는 합리적인 방법으로 해결할 수 없습니다. 조심하고 이러한 문제를 피하고 더 많은 권한을 얻는다면 새로운 사용자의 이익을 위해 "이 일은 두통을 줄 것입니다."라고 말하는 것이 더 쉽습니다. – georgeawg

내가 내 자신의 문제에 대한 해결책을 얻을 수 있었다 :) 대신 시계의 내가 여기 속성 을 관찰 시도하는 것은 내가 쓰고 있어요 코드의 긴 조각 때문에 내 작업 코드 https://plnkr.co/edit/LKuYcCU5z5wa7dTe1Uzo

내 더 INFOR에 대한 컨트롤러

<timer1 interval="1000" timer-event="start" timer="10"></timer1>

$attrs.$observe('timerEvent', function(value) { 
     switch (value.toLowerCase()) { 
      case "start": 
      $scope.timeoutId = null; 
      $scope.countdown = Number($attrs.timer); 
      $scope.tick(); 
      break; 
      case "stop": 
      $scope.stop(); 
      break; 
      case "destroy": 
      alert("It is watched") 
      $scope.stop(); 
      $scope.$emit('destroy_pizza', { 

      }); 

     } 

     }, true);

자세한 내용은 AngularJS $compile Attributes API Reference - $observe을 참조하십시오.

출처

2017-11-28 06:20:31

지시선 컨트롤러에서 속성 변경 각도보기

답변

관련 문제