Question

我在AngularJS中编写了一个自定义指令。而且我必须使用$ transclude的isSlotFilled方法。指令的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：无法读取属性＆＃39; isSlotFilled＆＃39;未定义的

实际上，我必须在指令的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-class中看到的，如果未填充内容插槽，它将隐藏div。但是ng-class中的条件总是返回false。我确定我在注入$ transclude时遗漏了一些东西。如何从news.html正确使用此方法？

Answer 1

我不确定您尝试使用模块系统做什么，但无论如何：$transclude不是服务，而是可以注入指令和组件的功能控制器。 $scope也是如此。

使用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');
}

AngularJS $ transclude undefined

1 个答案: