插入帶有AngularJS代碼的HTML

有關誰在HTML字符串中插入帶有Angular代碼的html的幫助。例子：插入帶有AngularJS代碼的HTML

<div class="container"> 
    <span class='btn' onclick="javascript: clicklink()">click here</span> 
<div name="content" id="content"> 
</div> 
</div> 

<script> 

function clicklink(){ 

     $("#content").html("<span class='label label-danger'>Invoice</span>"+ 
" <div ng-app ng-init='qty=1;cost=2'> <b>Total:</b> {{qty * cost | currency}} </div>"); 

} 

</script>

Example click here

來源

2016-11-08 Rayner Ulloa

也許最好只顯示/隱藏這個元素？ – marcinrek

是的，這不是一個好的設計模式，ngSanitize會阻止它。把HTML放在你的頁面上，並且用ng-show =「showMe」，然後讓你的onclick處理器設置showMe = true – Mikkel

我不能這樣做，因爲我想渲染一些代碼來自包含角碼的剃鬚刀。 html使用ajax作爲mvc控制器的響應插入。我想在mvc和angularjs之間做一個混合，你可以使用兩種方法來綁定數據。 –

如果你正在尋找一個「你好世界」之類的例子，這可能是因爲基本的，因爲它得到。

https://code-maven.com/hello-world-with-angular-controller

來源

2016-11-08 20:34:57 zee

謝謝，但我正在尋找其他的東西，更關注於生成包含Angularjs標籤的動態html代碼。 –

也許例如沒有意義，但這裏的東西也許有另一種方式來做到這一點。我有C＃MVC項目和渲染一些看法我用AJAX

Javascript才能模式加載到瀏覽：

function Edit(){ 
$.ajax({ 
        url: '../Controller_/Action_', 
        type: 'POST', 
        datatype: "html", 
        traditional: true, 
        data: { data1: data1 }, 
        success: function (result) {       
         $('._container').html(result); 
        }, 
        error: function (result) { } 
       }); 
}

MVC C＃代碼：

public ActionResult Edit() 
{ 
    ...\ code \... 
    return PartialView("/View/_Edit", model); 
}

查看主營：

<a href="#" data-toggle="modal" data-target="#_editModal" onclick="javascript:Edit(1, 'new')">Open Modal</a> 
<div name="_container"> 
<!-- Here load body of modal --> 
</div>

部分視圖（編輯）通過控制器中的操作（編輯）返回。應該是模態結構：

<div name="_editModal"> 
@html.LabelFor(x => x.Name) 
@html.EditorFor(x => x.Name) 
<div ng-app ng-init="qty=1;cost=2"> 
      <b>Invoice:</b> 
      <div> 
       Quantity: <input type="number" min="0" ng-model="qty"> 
      </div> 
      <div> 
       Costs: <input type="number" min="0" ng-model="cost"> 
      </div> 
      <div> 
       <b>Total:</b> {{qty * cost | currency}} 
      </div> 
     </div> 
</div>

來源

2016-11-08 21:43:16

這看起來不像是對問題的回答;問題是關於如何插入角度，這看起來完全是Asp.net MVC代碼。即使這是對答案的嘗試，它也表明這個解決方案真的有多糟糕，因爲它*看起來像*您想要在MVC中進行計算，並用Angular顯示這些計算的結果，而這些並不是這些框架的結果旨在共同運作。 – Claies

正如一些人在評論和其他答案中已經指出的那樣，這是絕對不好的做法。但也有一個內置的選項來解決您的問題，使用$compile的純AngularJS。

爲了完成這項工作，您需要將所有內容放在controller或directive之內，並相應地注入$compile服務。

您需要使用$compile服務來生成動態HTML標記的功能，該功能可以將範圍對象作爲參數使用，以生成可用的AngularJS模板。

插入模板後，需要使用$apply觸發AngularJS摘要循環。

<div class="container" ng-controller="MyController"> 
    <span class='btn' ng-click="clicklink()"">click here</span> 
<div name="content" id="content"> 
</div> 
</div> 


<script> 

app.controller("MyController", function($scope, $compile) { 
    var template = "<button ng-click='doSomething()'>{{label}}</button>"; 
    $scope.clicklink = function(){ 
     $scope.apply(function(){ 
      var content = $compile(template)($scope); 
      $("#content").append(content); 
     }); 
    } 
}); 

</script>

來源

2016-11-08 22:10:37 Daniel

插入帶有AngularJS代碼的HTML

回答

相關問題