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錯誤。

Basic fixes：

HTML

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

你爲什麼混合qTitle和Q-標題？ 至於JS：

​​

默認情況下，限制設置爲'A'。這意味着屬性。你的語法是針對元素的。 替換設置爲true不是強制性的。但是，因爲瀏覽器不理解你的元素，但理解了內容（「這是標題」），它將打印它。 鏈接功能必須是一個功能。您在那裏有語法錯誤（與transclude相同：您有一些您沒有使用的內容，然後按「;」）

您可以打印元素以瞭解內容。如果你這樣做，你會看到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。 您也可以在編譯階段定義自定義的複雜transclude函數，但在這裏似乎並不需要。