角度：ディレクティブにロジックをカプセル化する方法は？

Question

Rober C. Martinの "Clean Code"の本で、どのように角度指示の中に機能をカプセル化できるのだろうか。コメントを省略し、代わりに話す名前で機能を使用したいと思います。

このコードを想像してみて：

app.directive('myDirective' function() { 

return { 
    link: function(scope) { 

     // initialize visual user state 
     scope.visualUserState = { 
      // some very detailed state initialization 
     } 
    } 
}) 

ロード機能をカプセル化するために、私はこのようにこのコードを交換したいと思います：

app.directive('myDirective' function() { 

return { 
    link: function(scope) { 

     scope.initializeVisualUserState = function() { 
      scope.visualUserState = { 
       // some very detailed state initialization 
      } 
     } 


     scope.initializeVisualUserState(); 

    } 
}) 

第二のアプローチは "ということである上、私は好きではない何か「loadDataFromServer」は、ビューではなくリンク関数でのみ使用される機能です。そのため、スコープには、ビューとのやりとりに使用されるデータや関数のみを保持する必要があります。

また、コードはあまり読みにくくないと思います。

この機能は非常にプライベートなものですから、サービスの使用と注入は適切な方法ではないと思います。

この機能をカプセル化する方がよいでしょうか？

Answer 1

コントローラを使用して、ディレクティブにロジックを追加する必要があります。あなたのコントローラーでは、サービスを注入することができます。単一の目的のためにサービスを作成し、コントローラがサービスを呼び出すようにするのが最善です。

DOMノードが必要な場合は、実際にはリンク関数を使用する必要があります。

angular.module('myModule', []); 

// Controller 
(function() { 
    angular 
    .controller('myModule') 
    .controller('MyController', ['$scope', 'DataService', function($scope, DataService) { 
     DataService 
     .retrieveData() 
     .then(function(data) { 
      $scope.visualUserState = data; 
     }); 
    }]); 
})(); 

// Directive 
(function() { 
    angular 
    .module('myModule') 
    .directive('myDirective', function() { 
     return { 
     'restrict': 'E', 
     'scope': true, 
     'controller': 'MyController', 
     'controllerAs': '$ctrl' 
     }; 
    }); 
})(); 

Answer 2

(function(module){ 
    module.directive('myDirective', myDirective); 

function myDirective(){ 
    var directive = { 
    link : link, 
    scope : {state : '='}, 
    restrict : 'EA', 
    template : //Some template which uses state 
    } 
    return directive; 

    function link(){ 

    } 
}; 

module.controller('myController', myController); 
myController.$inject = ['$scope', 'OtherService']; 

function myController(scope, service){ 
    //service is used to pull the data and set to $scope.userState. 
} 
})(angular.module('myApp')) 

ジョン・パパでstyleguideを読んで、あなたのディレクティブは、次のようになります。

<myDirective state="userState"></myDirective> 

は、このことができますなら、私に教えてください。