AngularJS: Когда действие пользователя воздействует как на модель, так и на DOM

Question

Это для приложения AngularJS. У меня есть настраиваемая директива, которая зависит от службы.

Что мне действительно интересно, так это «угловой способ», связанный с действием пользователя, которое влияет как на модель, так и на DOM. Некоторые примеры кода:

HTML:

<form foo-places> 
    <!--other stuff --> 
    <span ng-repeat="place in places"> 
     <button ng-click="removePlace(place)">remove {{place}}</button> 
    </span>   
</form> 

JS:

angular.module('foo.directives', []).directive('fooPlaces', 
function(placesService) { 
    return { 
     controller : function($scope) { 
      $scope.places = placesService.places; 
        $scope.removePlace = function(name) { 
       placesService.removePlace(name); 
      }; 
      $scope.$on('placesChanged', function() { 
       $scope.places = placesService.places; 
      }); 
     }, 
     link : function($scope, element, attrs) { 
       //code to do stuff when user removes a place 
     } 
    } 
}) 

Когда пользователь удаляет место (нажав кнопку), мне также нужно делать вещи, чтобы возиться с DOM , например, прокрутите окно до вершины и т. д. Чувствуется странным наличие функции в контроллере, которая имеет дело с моделью, а затем еще одна функция в директиве, которая делает материал DOM ... но оба основаны на одном и том же пользователе действие.

Я передумал это или действительно что-то пропустил? Как я должен обрабатывать одно действие пользователя, которое касается как модели, так и DOM?

Answer 1

Когда вы имеете дело с AngularJS, возможно, вы слышали фразу «Модель - единственный источник истины». Если вы поймете эту часть, то остальная часть вещей легко встанет на свои места. Это «Угловой путь».

Когда пользователь взаимодействует - он не взаимодействует с DOM или представлением. Он взаимодействует с моделью. Само представление - это просто «вид» модели. Могут существовать другие взгляды на одну и ту же модель, поэтому модель является единственным источником истины. Теперь, какой угловой позволяет вам делать, это вносить изменения в модель, когда пользователь взаимодействует. Вы вносите эти изменения и потому, что модель изменилась, начало представления отражает изменение состояния модели.

Также, чтобы подчеркнуть разделение проблем - директива должна редко обращаться непосредственно к службе. Директива - это часть DOM, что означает, что это фрагмент представления. Служба обычно имеет какое-то отношение к бизнес-логике или представляет собой модель. В MVC или MVVM вы не можете напрямую взаимодействовать с моделью. Вы всегда используете ViewModel или Controller между ними. Это позволяет свести к минимуму зависимости.

Ваш ScrollToTop может быть услугой, которую вы вызываете у своего контроллера (см. , который является сервисом в Угловом). Он не делает то, что вы хотите, но его прокручивающийся сервис, который вам также нужно реализовать.

EDIT:

Чтобы уточнить, вы не обычно делают DOM manipulately материал в сфере услуг. Сценарий, в котором вы могли бы рассмотреть материал DOM-манипулирования в службе, - это когда, то, что вы пытаетесь сделать, не принадлежит к какому-либо определенному элементу html, а что-то, что должно произойти на вашем уровне приложения.

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

То же самое относится и к некоторым $window и $document связанным вещам (например, прокруткам).Они не принадлежат к какому-либо определенному элементу (если вы хотите прокручивать внутри div, это должна быть директива), следовательно, они должны быть сервисом. Кроме того, это сервис, который вы, вероятно, можете ввести в директиву. Скажем, каждый раз, когда вы запускаете свою директиву, вы хотите прокручиватьToTop или открывать диалог. Вы можете вводить эти виды услуг в свои директивы. Такими услугами, которые вы, вероятно, не должны вводить в директиву, являются сервисы, связанные с бизнес-логикой. Рассматривайте директиву в качестве повторно используемого компонента пользовательского интерфейса.

Конечно, вы можете создать компонент более высокого уровня (материал, который вы пытаетесь), который создает DSL, но тогда вам нужно точно знать, что вы делаете. До тех пор я предлагаю вам придерживаться простого старого контроллера, директивы и услуг, и каждый из них управляет своими собственными проблемами.