Angular:如何从自定义div获取内容

Question

我想从自定义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
   }

}

});

Answer 1

首先,我建议您阅读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".这意味着属性.您的语法适用于元素.将set设置为true不是强制性的.但是,因为浏览器不理解您的元素但是理解内容("这是标题"),它会打印出来.链接功能必须是一个功能.那里你有语法错误(转录相同:你有一些你没有使用的东西,后跟";")

您可以打印元素以了解内容.如果你这样做,你会看到,element在link不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.您还可以在编译阶段定义自定义复杂转换函数,但这似乎不是必需的.