插入带有 AngularJS 代码的 HTML答案

【问题标题】：Insert HTML with AngularJS code inside插入带有 AngularJS 代码的 HTML
【发布时间】：2016-11-08 20:29:15
【问题描述】：

关于谁在 html 字符串中插入带有 Angular 代码的 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

【问题讨论】：

或许只显示/隐藏这个元素会更好？
是的，这不是一个好的设计模式，ngSanitize 会阻止它。使用 ng-show="showMe" 将 HTML 放入您的页面中，并让您的 onclick 处理程序设置 showMe = true
我不能这样做，因为我想渲染一些来自包含角度代码的剃须刀的代码。 html 使用 ajax 作为来自 mvc 控制器的响应插入。我想在 mvc 和 angularjs 之间做一个混合，你可以使用两种方式来绑定数据。
你不能以这种方式插入 Angular 代码，即使你可以，这也是一种非常危险且容易出错的做法，更不用说使用一个 JavaScript 框架来操作另一个 JavaScript 框架的混乱了。 ...
Insert an angular js template string inside an element的可能重复

标签： javascript html angularjs

【解决方案1】：

如果您正在寻找“Hello World”类型的示例，这可能是最基本的。

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

【讨论】：

谢谢，但我正在寻找其他东西，更专注于生成包含 Angularjs 标签的动态 html 代码。

【解决方案2】：

也许这个例子没有意义，但这里可能存在另一种方式来做到这一点。我有一个带有 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>

【讨论】：

这看起来不像是问题的答案；问题是关于如何插入角度，这看起来完全是 Asp.net MVC 代码。即使这是对答案的尝试，它也表明了这个解决方案实际上有多糟糕，因为它似乎你想在 MVC 中进行计算并使用 Angular 显示这些计算的结果，这就是而不是这些框架被设计成如何协同工作。

【解决方案3】：

正如 cmets 和其他答案中的一群人已经说过的那样，这绝对是不好的做法。但是还有一个内置选项可以使用 $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>

【讨论】：