插入带有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

回答

相关问题