Как использовать представление AngularjS (файл .html) без использования его тегов

Внутри большого приложения AngularJS у меня есть новый файл шаблона HTML и контроллер для него, и я хотел бы создать макет, который дал мне дизайнер, используя это временное представление, так как я хотел бы иметь возможность вызывать некоторые данные из Объект $scope.

Я также создал для него новый маршрут, чтобы у меня было чистое рабочее пространство.

Но я не хочу включать его в основной файл index.html, например:

<my-new-template></my-new-template>

Я просто хотел бы начать использовать его без необходимости включать этот элемент HTML где-либо, возможно ли это? Это контроллер на данный момент:

.directive('portfolio', [
function () {
        return {
            templateUrl: "views/temporary-view.html",
            scope: {
                data: "="
            },

            link: function (scope, element, attrs, ctrl) {                  
                scope.stuff = 'stuff';                  
            }
        };
    }])

Вид:

<nav class="portfolio-view">
       {{stuff}}
</nav>

Спасибо за помощь нубу вроде меня! :)


angularjs angular-routing angular-template angular-controller
person Edgar Quintero    schedule 16.02.2018    source источник
comment
Очень жаль видеть, что вы уже проголосовали против. Было бы здорово, если бы человек, который проголосовал против, мог оставить комментарий для вас. В общем, ваш вопрос не ясен. Например, вы показываете код директивы как код контроллера. Возможно, вам нужно перефразировать весь вопрос, чтобы вы могли получить ответ от сообщества.   -  person Kalyan    schedule 16.02.2018
comment
Думаю, я понимаю, о чем вы говорите, другими словами, используйте .controller вместо .directive?   -  person Edgar Quintero    schedule 16.02.2018

Ответы (2)


arrow_upward
1
arrow_downward

В вашей директиве вы можете изменить параметр restrict, чтобы изменить способ вызова директивы в HTML. Для этого есть 4 варианта. Я нашел это в документации AngularJS для директив :

restrict
String of subset of EACM which restricts the directive to a specific directive declaration style. If omitted, the defaults (elements and attributes) are used.

E - Element name (default): <my-directive></my-directive>
A - Attribute (default): <div my-directive="exp"></div>
C - Class: <div class="my-directive: exp;"></div>
M - Comment: <!-- directive: my-directive exp -->

По умолчанию он использует EA, то есть как элемент (как вы не хотите называть его в HTML) или как атрибут.

Если вы хотите изменить его, например, на класс, измените определение директивы на:

.directive('portfolio', [
function () {
        return {
            restrict: 'C',
            templateUrl: "views/temporary-view.html",
            scope: {
                data: "="
            },

            link: function (scope, element, attrs, ctrl) {                  
                scope.stuff = 'stuff';                  
            }
        };
    }])

и вы можете назвать это так:

<div class="portfolio"></div>

Я думаю, это то, что вы имеете в виду, и я надеюсь, что это поможет!

person Robyn MacCallum    schedule 16.02.2018

arrow_upward
0
arrow_downward

Поэтому я просто изменил .directive на .controller и разместил его вместе с другими контроллерами в приложении, а не с директивами... Наверное, меня это смутило!

.controller('PortfolioView', ["$scope",
    function ($scope) {
        $scope.stuff = 'stuff'; 
    }])
person Edgar Quintero    schedule 16.02.2018