Question

有关谁在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

Answer 1

如果您正在寻找“Hello World＆＃39;例如，这可能是最基本的。

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

Answer 2

也许这个例子没有意义，但这里可能存在另一种方式。我有一个带有c＃MVC的项目，用于渲染一些视图我使用ajax

将模式加载到View中的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>

部分视图（编辑）在Controller中按Action（编辑）返回。应该是一种模态结构：

<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>

Answer 3

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

在里面插入带有AngularJS代码的HTML

3 个答案: