AngularJS $transclude не определено

Я написал пользовательскую директиву в AngularJS. И я должен использовать метод isSlotFilled $transclude. JavaScript директивы:

define(['../directives-module'], function (directivesModule, $scope, $transclude) {    
    directivesModule.directive('news', function() {
        return {           
            restrict: 'E',
            replace: true,
            transclude: {
              'heading': 'heading',
              'content': '?content'
            },
            scope: {
                'cmsContent': '@'
            },
            templateUrl: 'directives/news.html',
            link: function(scope, element, attrs, ctrl, transclude){
                console.log($transclude.isSlotFilled(content));
            },
        };
      });    
});

Я попытался вывести console.log(), чтобы проверить, работает ли метод. Приведенный выше console.log() не работает, говоря:

TypeError: невозможно прочитать свойство isSlotFilled неопределенного

На самом деле, я должен использовать этот метод в HTML-файле директивы. Файл news.html содержит:

<div class="row">
    <div class="largeText shadow1" ng-transclude="heading"></div>
    <div class="mediumText shadow2" ng-transclude="content"
         ng-class="{'hide' : $transclude.isSlotFilled(content)}">
    </div>
</div>

Как вы видите в ng-классе, он скроет div, если слот содержимого не заполнен. Однако условие внутри ng-класса всегда возвращает false. Я уверен, что что-то упускаю при введении $transclude. Что я должен сделать, чтобы правильно использовать этот метод из news.html?


angularjs angular-directive angularjs-ng-transclude
person Faruk Yazici    schedule 29.03.2016    source источник
comment
какую версию углового вы используете?   -  person Vishal Rajole    schedule 29.03.2016
comment
@VishalRajole Это 1.5.0   -  person Faruk Yazici    schedule 29.03.2016
comment
Вы не вводите $transclude в директиву, что бы это ни было. Это модуль? Обслуживание? В вопросе об этом ничего не сказано.   -  person Estus Flask    schedule 29.03.2016

Ответы (1)


arrow_upward
2
arrow_downward

Я не уверен, что вы пытаетесь сделать, используя свою модульную систему, но в любом случае: $transclude - это не служба, а функция, которую можно вводить в контроллеры директив и компонентов. То же самое касается $scope.

Функция link вызывается с функцией transclude, поэтому вы можете использовать ее напрямую. Также не забудьте поставить кавычки вокруг content.

define(['../directives-module'], function (directivesModule) {    
    directivesModule.directive('news', function() {
        return {           
            restrict: 'E',
            replace: true,
            transclude: {
              'heading': 'heading',
              'content': '?content'
            },
            scope: {
                'cmsContent': '@'
            },
            templateUrl: 'directives/news.html',
            link: function(scope, element, attrs, ctrl, transclude){
                console.log(transclude.isSlotFilled('content'));
            },
        };
      });    
});

Чтобы получить к нему доступ в шаблоне, вы можете добавить его как свойство в область видимости. Вы можете сделать это в функции ссылки, если хотите:

function(scope, element, attrs, ctrl, transclude){
    console.log(transclude.isSlotFilled('content'));
    scope.transclude = transclude;
}

// Or maybe
function(scope, element, attrs, ctrl, transclude){
    console.log(transclude.isSlotFilled('content'));
    scope.hasContent = transclude.isSlotFilled('content');
}
person nej_simon    schedule 14.04.2016
comment
БЛАГОДАРЮ ВАС. Я не мог на всю жизнь понять, как получить эту функцию transclude - person Peter Nixey; 22.11.2016
comment
это не мой вопрос, но я уверен, что @Faruk Yazıcı может вам помочь - person Peter Nixey; 06.12.2016