2

我想从自定义 div 标签中获取内容，我尝试了各种方法来做到这一点，但效果不佳。这是一个例子。通用项是检索自定义指令标签中的内容。然后将它们绑定到模板中。我希望有人能给我一个建议或解决方案，或者做类似的事情

html

 <questions>
      <qTitle> this is title</q-title>
       <qContent> this is content <q-content>
 </questions>

角度js

 var app = angular.module('app'[]); 
 app.directive('questions', function () {
     return {
     transclude: true;
     template: "<div class='someCSSForTitle'>{{qTitle}}</div>"+
               "<div class='someCSSForContent'>{{qContent}}</div>"
     link:(scope, element, attrs)
        scope.qTitle = element.find(qTitle).innerHTML
        scope.qContent = element.find(qContent).innerHTML
   }

}

});

4

1 回答 1

8

首先，我建议您阅读 AngularJS 指南。您甚至没有正确复制粘贴结构，并且出现 javascript 甚至 html 错误。

基本修复：

HTML 

<questions>
    <q-title>this is title</q-title>
    <q-content>this is content</q-content>
</questions>

为什么要混合 qTitle 和 q-title？至于JS：

app.directive('questions', function () {
    return {
        restrict: 'E',
        replace: true,
        template: "<div class='question'>{{title}}</div>", /* simplified */
        link: function(scope, element, attrs) {
            scope.title = "hallo";
            console.log(element.html());
        }        
    };
});

默认情况下，restrict 设置为“A”。这意味着属性。您的语法适用于元素。replace 设置为 true 不是强制性的。然而，因为浏览器不理解你的元素但理解内容（“这是标题”），它会打印它。链接功能必须是一个功能。你在那里有语法错误（对于 transclude 也是如此：你有一些你没有使用的东西，后跟“;”）

您可以打印元素以了解内容。如果你这样做，你会看到elementin linkis not question。

现在，如果您想阅读内容，可以使用 transclude 函数或为每个部分创建指令并单独创建模板。这似乎更简单。现场示例：

app.directive('questions', function () {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: "<div class='question' ng-transclude></div>",      
    };
});


app.directive('qTitle', function () {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: "<div class='title' ng-transclude></div>",      
    };
});

在这种情况下，您将内容转换为内部 div。您还可以在编译阶段定义自定义复杂的嵌入函数，但这在这里似乎没有必要。

于 2013-07-23T20:29:28.723 回答