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错误。

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

默认情况下，restrict设置为“A”。这意味着属性。您的语法适用于元素。将set设置为true不是强制性的。但是，由于浏览器不了解您的元素但确实理解了内容（“这是标题”），因此它将打印出来。链接功能必须是一个功能。那里你有语法错误（转录相同：你有一些你没有使用的东西，后跟“;”）

您可以打印元素以了解内容。如果您这样做，您会发现element中的link不是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。您还可以在编译阶段定义自定义复杂转换函数，但这似乎没有必要。

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

1 个答案: