Angular: Wie Logik in eine Direktive kapseln?

Question

Ich frage mich, wie ich die Funktionalität innerhalb einer eckigen Direktive nach Rober C. Martins "Clean Code" Buch kapseln kann. Ich möchte Kommentare weglassen und stattdessen Funktionen mit sprechenden Namen verwenden.

Stellen Sie sich vor diesen Code:

app.directive('myDirective' function() { 

return { 
    link: function(scope) { 

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

die Last-Funktionalität zu verkapseln, würde Ich mag diesen Code wie folgt ersetzen:

app.directive('myDirective' function() { 

return { 
    link: function(scope) { 

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


     scope.initializeVisualUserState(); 

    } 
}) 

Was Ich mag es nicht auf dem zweiten Ansatz ist, dass " "loadDataFromServer" ist eine Funktionalität, die nur von der Link-Funktion und nicht von der Ansicht verwendet wird. Daher verstoße ich gegen die Regel, dass der Bereich nur Daten und Funktionen enthalten sollte, die für die Interaktion mit der Ansicht verwendet werden.

Auch der Code ist nicht sehr lesbar, denke ich.

Da die Funktionalität sehr private Sachen der Richtlinie behandelt, denke ich, dass die Verwendung und das Injizieren eines Dienstes nicht der richtige Weg ist.

Was wäre eine bessere Praxis, um diese Funktionalität zu kapseln?

Answer 1

Sie sollten einen Controller verwenden, um Ihrer Richtlinie Logik hinzuzufügen. In Ihrem Controller können Sie Dienste injizieren. Am besten schreiben Sie einen Dienst für einen bestimmten Zweck und lassen Sie Ihren Controller einfach die Dienste aufrufen.

In der Tat sollten Sie nur die Link-Funktion verwenden, wenn Sie Ihren DOM-Knoten haben müssen, der eigentlich nie nah ist.

Lesen Sie die styleguide von John Papa

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')) 

Und Ihre Richtlinie wird:

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

Lassen Sie mich wissen, ob das hilft.