2016-09-02 9 views
0

anglejs 1.2で(理想的に)フレキシブルなコンポーネントベースの再利用可能なテンプレートのセットを開発し、一連のeラーニングモジュールを開発しています。
仕様の一部には、「完成可能な」コンポーネントの追跡が必要です。現時点では、メインコントローラは次のようになります。

app.controller('mainCtrl', ['$scope', function($scope) { 

    $scope.completables = []; 
    $scope.completed = []; 

    $scope.addCompletable = function (object) { 
     $scope.completables.push(object); 
     // also set correlating completed property to 'false' for each completable added 
     $scope.completed.push(false); 
    } 

    $scope.componentCompleted = function(id) { 
     // Set complete to 'true' for matching Sscope.completed array index 
     // We COULD use .indexOf on the completables array, but that doesn't work with IE8 
     var tempArray = $scope.completables; 
     var matchingIndex = -1; 
     for (var i=0; i<tempArray.length; i++) { 
      if (tempArray[i]==id) { 
       matchingIndex = i; 
      } 
     } 
     if (i>-1) { 
      $scope.completed[matchingIndex] = true; 
     } 

    }  

}]); 

私たちは、次のディレクティブトリガーENG-completable属性持っている:「-completable ENG」

app.directive('engCompletable', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      // add the id of this element to the completables array in the main controller 
      scope.$parent.addCompletable(attrs.id); 
     } 
    } 
}); 

だから、毎回角度出会いの属性要素の場合、親スコープでaddCompletableを呼び出し、要素IDを 'completables'配列に追加し、 'false'を 'completed'配列の対応するインデックスに追加します。また、「componentCompleted」関数をトリガする親スコープを使用しています

app.directive('engPopup', function() { 
     return { 
      restrict: 'A', 
      replace: true, 
      templateUrl: 'components/popup.html', 
      link: function(scope, element, attrs) { 

       scope.$watch(function() { return element.is(':visible') }, function() { 
        scope.$parent.componentCompleted(attrs.id); 
       }); 

      } 
     }; 
    }); 

:ENG-popup属性ディレクティブで

は、我々はそれが見えるようにされているかどうかをチェックする機能を持っています。私は、親の範囲を参照することは悪い習慣であると言われてきました。そして、明らかに私たちの単体テストを台無しにしています。

私は何が選択肢かを知りたいと思います。特定のコンポーネントが完成したことをアプリに知らせるにはどうすればよいですか?そして、この状態はどこで追跡されるべきですか?

私は本当にこれを行う方法を知りたいと思います。間違った方法でやっていると言われるだけではありません。代替案が何であるか教えてください。

しかし、いつものように、どんな助けも大歓迎です。

+1

代わりに、すべてのコンポーネントを追跡し、その状態を維持する(完了/未完了)サービスを作成することもできます。 $ scope.parentの必要性がなくなり、必要なコントローラや指令にサービスを注入することができます。 –

+1

@DenisonLuzそれはやった!このコメントを自由に回答に変えてください。私はそれを受け入れます。どうもありがとう! – moosefetcher

+0

回答が作成されました。 :)私は喜んで助けてくれました。 –

答えて

2

代わりに、サービスを作成してすべてのコンポーネントを追跡し、その状態を維持する(完全/未完了)ことができます。

$ scope.parentの必要性がなくなり、必要なコントローラまたは指令にサービスを注入できます。

:)

0

そのcompletablesリストでアプリケーション全体yoがaddCompletable方法と一緒に$rootScopeにそれを追加することを検討することができれば、他のではなく、あなたのmainController$scopeに追加のmethods-を関連付ける-and。

この方法でscope.$parent.componentCompleted(attrs.id);$rootScope.componentCompleted(attrs.id);に置き換えてscope.$parentに電話をかけないでください。

関連する問題