angularjs - Angular : How to get content from a custom div

Question

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

html

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

Angular 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
   }

}

});

Answer 1

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

Basic fixes :

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());
        }        
    };
});

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

您可以打印元素以了解内容。如果这样做，您会看到 link 中的 element 不是 question。

现在如果你想阅读内容，你可以使用transclude函数或者为每个部分创建指令并单独创建模板。这看起来更简单。 Live example :

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。您还可以在编译阶段定义自定义复杂的嵌入函数，但这在这里似乎没有必要。