0

У меня есть следующий код в моем модуле:Это правильный способ привязки фабрики к контроллеру?

.controller('ModalInstanceCtrl', function($rootScope, $scope, emailService) { 
    $scope.emailService = emailService; // Good or not; if not, why? 
    $scope.showed = false; 
    $rootScope.$watch('showed', function() { $scope.showed = $rootScope.showed; }); // In case you wonder why I did this - I'm using this trick to prevent watch from firing twice, because that would happen if I remove the watch below and put its code here. 
    $scope.$watch('showed', function() { 
     if (!$rootScope.showed) return; 
     $scope.selected = 0; 
     $scope.primary = true; 
     $scope.verified = true; 
     if (emailService.emails.length == 0) emailService.load(); 
    }); 
    $scope.EmailSelected = function() { 
     emailService.setCurrent($scope.selected); 
     $scope.primary = emailService.emails[$scope.selected].primary; 
     $scope.verified = emailService.emails[$scope.selected].verified; 
    }; 
}); 

.factory('emailService', function($resource, $http) { 
    var emails = []; // [{email: '[email protected]', verified: true, primary: false}, ...] 
    var selected = 0; 

    function sendreq(action, email){ 
     $http({ 
      method: 'POST', 
      url: '/email/', 
      data: "action_" + action + "=&email=" + email, 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).then(function(response) { 
      console.log(response.data); 
      return true; 
     }, function(data){ 
      return data; 
     }); 
    } 

    return { 
     emails: emails, 
     selected: selected, 
     setCurrent: function(curr){ 
      selected = curr; 
     }, 
     load: function(){ 
      $resource('/api/email/?format=json').query({}, 
       function success(result) { 
        emails.push.apply(emails, result); 
       }); 
     }, 
     add: function(email) { 
      for (var e in emails) if (emails[e].email == email) return false; 
      return sendreq('add', email); 
     }, 
     remove: function() { 
      sendreq('remove', emails[selected].email); 
     } 
    } 

}) 

И этот код в моем HTML шаблон:

<div ng-repeat="e in emailService.emails"> 
    <input type="radio" ng-model="$parent.selected" ng-value="$index" ng-change="EmailSelected()" id="email_{{ $index }}" name="email"> 
    <label for="email_{{ $index }}" ng-bind='e.email'></label> <span ng-show="e.verified">Verified</span> <span ng-show="e.primary">Primary</span> 
</div> 
<div><button ng-disabled="primary" ng-click="emailService.remove()">Remove</button></div> 
<form novalidate> 
    <input class="form-control" type="email" name="email" ng-model="email" placeholder="Email"> 
    <input type="submit" ng-disabled="email === undefined" ng-click="emailService.add(email)" value="Add Email Address"> 
</form> 

И я хочу спросить, есть ли у правильно собранный модуль и шаблон, потому что Я работаю с AngularJS в первый раз. В частности, я хочу спросить, правильно ли связывать всю фабрику с областью? Кроме того, если у кого-то есть больше времени, он может посмотреть на другой код, чтобы узнать, все ли правильно или нет. Не стесняйтесь писать какие-либо предложения о моем коде.
Заранее благодарим!

ответ

0

Почему вы хотите связать весь сервис? Я не вижу необходимости в этом коде. Вы вызываете части службы с помощью обработчика службы, нет никакой конкретной необходимости разместить весь сервис в области видимости.

+0

Если я этого не делаю, я не могу вызвать методы обслуживания (в моем случае 'add' и' remove') из шаблона HTML. – MikiSoft

+0

У вас могут быть обработчики в области, которые, в свою очередь, вызывают сервисные функции. – shiv

+0

Почему это лучше, чем просто поместить весь сервис в область видимости? – MikiSoft

1

Это всегда зависит от конкретного случая. Методы

Таким образом шаблонные обертки

$scope.add = (...args) => emailService.add(...args); 

может быть опущен, а также их испытания в спецификации контроллера.

Другим преимуществом является то, что она обеспечивает существующий объект для связывания соответствующих данных и области видимости наследования скалярных свойств Область применения:

<parent-scope> 
    <p ng-init="emailService.selected = 0"></p> 
    <child-scope> 
    <p ng-init="emailService.selected = 1"></p> 
    {{ emailService.selected === $parent.emailService.selected }} 
    </child-scope> 
</parent-scope> 

Это, конечно, не будет работать, как ожидалось, если нет emailService объекта. Это особенно полезно, когда синтаксис controllerAs не используется.

Нет ничего плохого в том, что выставлять службу в область видимости - если ее API соответствует области контроллера. И это может указывать на антипаттерн, если это не так, или если слишком много служб, которые злоупотребляют подобным образом.