AngularJS - Сделать или не создавать директиву

Question

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

Однако предположим, что на моей домашней странице у меня есть раздел приветствия, в котором отображается цитата дня с фоновым изображением, которое поступает из службы Rest. Должна ли это быть Директива, которая может инкапсулировать разметку и логику контроллера? Или это должен быть простой контроллер AngularJs, который связывается с разметкой в ​​моем index.html?

Что представляет собой то, что должно быть создано в качестве Директивы?

Answer 1

Директива - это только оболочка для контроллера. Это означает, что если у вас есть контроллер, вы можете его использовать. Но вы также можете использовать тот же контроллер, что и контроллер директивы, например, вместо link использование функции controller.

Это позволяет сделать четкую линию, где использовать директиву и где использовать контроллер.

Мы должны использовать контроллер, если хотим воспроизвести логику фрагмента HTML-разметки. Когда мы хотим использовать те же самые назначения $scope, те же функции внутри $scope, ... но разметка HTML всегда различна для любого другого места, где мы используем этот контроллер.

Мы должны использовать директиву, когда у нас есть такая же логика в контроллере директивы и той же разметке HTML.

Так что в вашем случае это определенно директива.

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

Answer 2

Есть три вещи, которые потребуют, чтобы реализовать эту функциональность:

1. AngularJS Шаблон а.к.а. разметки для отображения цитаты с изображением рядом с ним.
2. Услуга AngularJS для включения вызова REST для извлечения вышеуказанных данных с сервера.
3. Контроллер AngularJS для использования службы AngularJS для подачи данных назад шаблона (точка 1), чтобы обновить его после каждого остального вызова.

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

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

App = angular.module('App', []); 
App.directive('welcomeQuote', function(QuoteService) { 
    return { 
    restrict: 'E', 
    template: '<div><img ng-src="{{quote.img}}" /><span ng-bind="quote.title"></span></div>', 
    controller: function(scope) { 
     // returns {img: 'angular.png', title: 'AngularJS'; 
     QuoteService.fetch().then(function(data) { 
     scope.quote = data; 
     }); 
    } 
    } 
}); 
App.factory('QuoteService', function($http) { 
    return function() { 
    fetch: function() { 
     return $http.get('http://quote-server.com/new') 
    } 
    }; 
}); 

Наконец, вы можете использовать виджет как:

<welecome-quote></welcome-quote>