如何動態地動作角ng-include命令

是否可以動態添加一個ng-include元素到HTML頁面並使其動作？如何動態地動作角ng-include命令

我有一個Drag N Drop應用程序，您可以將元素拖放到頁面上，並在拖放區中將元素替換爲更詳細的元素。例如，您拖動一個表示日曆的框，並在拖放時顯示日曆。爲了清楚創建一個新元素並將其添加到DOM中，在刪除之前它不存在。

當元素被刪除時，我希望我可以用一段如下所示的HTML代替它。而不必在一個字符串中定義的標記就像是這是不是很漂亮的樣子：

<div class='panel panel-default'> 
    <div class='panel-heading'> 
    <h3 class='panel-title'> 
     <span class='glyphicon glyphicon-remove'></span> 
     WIDGET NAME 
     <spanclass='glyphicon glyphicon-cog'></span> 
    </h3> 
    </div> 
    <div class='widgetContainer' ng-include="'widgets/widget.html'"></div> 
</div>

當上面的HTML被插入到頁面中不包括引用的HTML文件。

我想要發生的是一個HTML文件被加載包含小部件標記幷包含在適當的位置。

我是新來的角，所以我不知道這是因爲：

動態添加NG-包括不支持
我是否需要做一些與控制器進行處理這個邏輯
我應該使用標籤，而不是屬性？
這是不可能的。

請提供解決方案的例子，正如我所說我是Angular的新手。

感謝

UPDATE

用於創建，我想動態添加到頁面的HTML看起來像這樣

$("#template").append(
    " \ 
    <div class='panel panel-default'>\ 
    <div class='panel-heading'>\ 
    <h3 class='panel-title'>\ 
    <span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeElement(this)'></span>\ 
    " + widgetDetail['serviceName'] + "\ 
    <span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\ 
    </h3>\ 
    </div>\ 
    <div class='markupContainer' ng-include=\"'widgets/" + id +".html'\"></div>\ 
    </div>\ 
    " 
);

的代碼我已上傳的完整代碼GitHub。拖放方面目前正在通過HTML5 javascript進行處理，這可以在文件/public/javascripts/js_dragndrop.js中看到。新的小工具添加到頁面（上面的代碼）是/public/javascripts/jq_dragndrop.js

我在原型階段試圖制定出DragNDrop元素，所以不要指望高質量的代碼:)

來源

2016-03-05 StackLemming

這種感覺太寬泛以至於無法提供可靠的答案。您尚未顯示處理代碼拖放方面的代碼;所呈現的標記沒有任何可以工作或不工作的「代碼」。有人可能會認爲你的意思是沒有顯示標記，但問題並不明確，如果沒有插入標記的代碼，就不可能推斷出你的意圖是什麼，或者真的可能出現問題的地方謊言。 – Claies

@Claies感謝您的評論。我已經用更多的信息更新了這個問題，並且鏈接到了GitHub上的源代碼。 – StackLemming

這看起來像是將JQuery與Angular混合在一起，這使得事情稍微複雜化。 Angular不會在這裏更新ng-include，因爲它是在沒有角度知識的情況下添加的。如果使用純角度不是一個選項，那麼你需要一些方法來附加角度和調用範圍。$ apply（） – Claies

很我找到了一種通過移動HTML5拖放代碼並將代碼拖放到AngularJS指令中然後（使用[Compile dynamic template from outside of angular]作爲指導）實現我想要的方式，並將html模板加載到了我想要的地方。

主要的代碼更改如下：

angular.element(document).injector().invoke(function ($compile) { 

    var widgetDetail = widgets[e.dataTransfer.getData('Text')]; 

    var obj = $("#template"); 
    var scope = obj.scope(); 

    obj.append(
    "<div class='panel panel-default'><div class='panel-heading'><h3 class='panel-title'>\ 
    <span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeWidget(this)'></span>\ 
    " + widgetDetail['serviceName'] + "\ 
    <span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\ 
    </h3></div><div class='markupContainer' ng-include=\"'widgets/" + widgetDetail['serviceId'] + ".html'\"></div>\ 
    " 
    ); 

    $compile(obj.contents())(scope); 
    scope.$digest(); 
});

你可以在Git項目/public/controllers/template.js的完整代碼，如果你有興趣。

來源

2016-03-06 14:48:52 StackLemming

如何動態地動作角ng-include命令

回答

相關問題