Угловой: как инкапсулировать логику в директиве?

Question

Интересно, как я могу инкапсулировать функциональность внутри угловой директивы в соответствии с книгой Роберта К. Мартина «Чистый код». Вместо этого я хочу опустить комментарии и использовать функции с именами говорящих.

Представьте этот код:

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-узел, который на самом деле очень близок к никогда.

Читать styleguide Джон 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')) 

И ваша директива будет:

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

Позвольте мне знать, если это помогает.