Внедрение зависимостей в компоненты Angular, такие как директивы

Вот одна вещь, которую я привык делать с угловыми директивами

angular.module('app.directives').directive('login', ['$templateCache', function ($templateCache) {
    return {
        restrict: 'E',
        template: $templateCache.get('directives/login/login.html'),
        controller: 'LoginController as vm',
        scope: true
    };
}]);

Я очень привязался к использованию Template Cache для вставки содержимого HTML в шаблон моей директивы. Теперь, с Angular 1.5, есть новая вещь, которую используют все крутые дети, называется component(), которую я смотрю, чтобы увидеть, действительно ли она хороша, и я застрял в самой начальной части: как вводить вещи в сам компонент (не в контроллер)?

В этом случае вы можете видеть, что я добавляю в директиву login зависимость $templateCache. Как бы я переписал эту директиву как компонент? (имея в виду мое желание использовать $templateCache вместо templateUrl)


javascript angularjs angularjs-components
person Marco Aurélio Deleu    schedule 17.05.2016    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Что ж, в компонентах Angular 1.5 свойство template может быть функцией, и эта функция может быть внедрена (документация) .

Итак, вы можете просто использовать что-то вроде:

...
template: ['$templateCache', function ($templateCache) {
   return $templateCache.get('directives/login/login.html')
}]
...

Несколько ссылок из поиска Google: одна и два.

Надеюсь, это поможет.

person MaKCbIMKo    schedule 17.05.2016

arrow_upward
3
arrow_downward

Ответ MaKCblMKo правильный, но помните, что AngularJS сначала проверит templateCache, прежде чем перейти к извлечению шаблона. Поэтому вам не нужно делать этот вызов в вашей директиве или компоненте.

angular.module('myApp', [])
.component('myComponent',{
    templateUrl: 'yourGulpPattern'
})
.run(function($templateCache) {
    $templateCache.put('yourGulpPattern', 'This is the content of the template');
});

https://jsfiddle.net/osbnoebe/6/

person Zach    schedule 17.05.2016
comment
Дело не в том, чтобы поместить туда контент, у меня есть задача gulp, которая минимизирует и «помещает» каждый HTML-файл в кэш шаблонов. Мне просто нужно было получить доступ к элементу, чтобы я мог получить его содержимое. - person Marco Aurélio Deleu; 18.05.2016
comment
Это круто, но я пытаюсь сказать, что если ваша задача gulp выполняет «пут», вам все равно не нужно трогать $templateCache. Просто укажите URL-адрес, и он возьмет его из кеша, поскольку он уже там. Мой пример put просто показывал, что он уже находится в кеше. Другими словами, представьте, что функция запуска в моем примере — это ваша задача gulp... если только я все еще не понимаю, о чем вы говорите. - person Zach; 18.05.2016
comment
Просто укажите ссылку на templateUrl и позвольте angular извлечь его из $templateCache для вас. Я надеюсь, что это яснее. Я не пытался показать вам, как поместить его в кеш. - person Zach; 18.05.2016
comment
Я попробовал ваш подход и получил 404. На самом деле мой сервер не обслуживает страницу по пути, который потребовался бы для использования templateUrl, вместо этого gulp просто заполняет templateCahce с помощью предопределенного шаблона, который я могу получить с помощью $templateCache. получить. - person Marco Aurélio Deleu; 18.05.2016
comment
@MarcoAurélioDeleu, вам больше не нужно тратить на это время. Я просто очень удивлен, что это не работает. Должно быть, я не понимаю, как ваш скрипт gulp заполняет $templateCache. Если он заполняет его так же, как указано выше $templateCache.put(yourPredefinedPattern, template), то по всем параметрам он должен работать. В моей скрипке также нет файла, отправляемого с сервера. jsfiddle.net/osbnoebe/5 Если ваш templateUrl соответствует тому же шаблону, который gulp использовал для размещения это в $templateCache, тогда он должен вытащить его. Ну что ж... - person Zach; 18.05.2016
comment
Я все еще обращаюсь к этому, потому что, хотя ответ, который я принял, действительно отвечает на мой вопрос, ваш путь чище, и я бы предпочел его. К счастью, я обнаружил совершенно не связанную с этим проблему, которая заставила меня поверить, что ваш метод не работает. Теперь у меня все работает так, как вы сказали, и это довольно аккуратно. - person Marco Aurélio Deleu; 19.05.2016