Angular: Как заключить логику в директиву?

Question

Angular: Как заключить логику в директиву?

0

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

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

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" - это некоторая функциональность, которая используется функцией ссылок, а не представлением, поэтому я нарушаю правило, в котором область действия должна содержать только данные и функции, которые используются для взаимодействия с вид.

Я думаю, что код не очень читабельный.

Поскольку функциональность обрабатывает очень личные вещи в директиве, я думаю, что использование и внедрение услуги - это неправильный путь.

Какова была бы лучшая практика для инкапсуляции этой функциональности?

user2516186 27 июль 2016, в 10:41

Источник

Теги:

angularjs

encapsulation

2 ответа

0

(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>

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

Naveen 27 июль 2016, в 06:56

Ещё вопросы

Pjetr · Accepted Answer · 2016-07-27T05-54-00.000Z

Вы должны использовать контроллер для добавления логики в свою директиву. В вашем контроллере вы можете вводить Службы. Лучше всего написать услугу для одной цели, и просто позвольте своему контроллеру позвонить в службы.

Фактически вы должны использовать только функцию ссылок, если вам нужен ваш 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'
      };
    });
})();