ディレクティブコントローラからアトリビュートアングルの変化を監視する

ディレクティブがありますが、ディレクティブコントローラのアトリビュートを見ているときに問題が発生しています。ディレクティブコントローラからアトリビュートアングルの変化を監視する

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ではなくscopeを使用してください。

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

ですよりインフォアのためのコントローラ

<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

ディレクティブコントローラからアトリビュートアングルの変化を監視する

答えて

関連する問題