Insert HTML with AngularJS code inside

Question

any help about who insert html with Angular code inside the html string. Example:

<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

Yes, this isn't a good design pattern, and ngSanitize will prevent it. Put the HTML in your page already with an ng-show="showMe", and get your onclick handler to set showMe = true — Mikkel, Nov 08 '16 at 20:34
I can't do that because I want render some code come from a razor that contain the angular code. The html is inserting using ajax as response from a mvc controller. I want to make a hybrid between mvc and angularjs, where you can use two ways to bind data. — Rayner Ulloa, Nov 08 '16 at 20:38
you can't insert angular code this way, and even if you could, it's a very dangerous and error prone practice, not to mention the confusion of using one JavaScript Framework to manipulate another JavaScript Framework..... — Claies, Nov 08 '16 at 21:00
*technically*, you could manually bootstrap angular (feel free to look up how to do that if you really want to try), but I won't provide an answer showing how to do this because it's such a bad practice. — Claies, Nov 08 '16 at 21:03
Maybe the example doesn't make sense, but here is the thing maybe exist another way to do that. — Rayner Ulloa, Nov 08 '16 at 21:27
Possible duplicate of [Insert an angular js template string inside an element](http://stackoverflow.com/questions/14846836/insert-an-angular-js-template-string-inside-an-element) — Heretic Monkey, Nov 08 '16 at 21:48
@MikeMcCaughan unfortunately, that question isn't really a duplicate, since in that question angular is bootstrapped, and in this question angular is not, which means `$compile` can't be used here. However, I still contend that this is a very bad practice, and there isn't any problem that I can think of that should be solved this way instead of a more conventional method. — Claies, Nov 09 '16 at 10:55

score 0 · Answer 1 · answered Nov 08 '16 at 20:34

0

If you're looking for a 'Hello World' kind of example, this is probably as basic as it gets.

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

answered Nov 08 '16 at 20:34

zee

656
2
7
30

Thank you but I looking for something else, is more focus to generate dynamic html code that contain Angularjs tags inside. – Rayner Ulloa Nov 08 '16 at 20:45

score 0 · Answer 2 · answered Nov 08 '16 at 21:43

Maybe the example doesn't make sense, but here is the thing maybe exist another way to do that. I have a project with c# MVC and for render some Views I use ajax

Javascript to load modal into View:

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# code:

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

View Main:

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

Partial view (Edit) return by Action (Edit) in Controller . Should be a modal structure:

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

this doesn't look like an answer to the question; the question was about how to insert angular, and this looks to be entirely Asp.net MVC code. Even if this is an attempt at an answer, it shows how bad this solution really is, because it *seems like* you want to do calculations in MVC and display the results of those calculations with Angular, which simply is not how these frameworks were designed to function together. — Claies, Nov 09 '16 at 11:00

score 0 · Answer 3 · answered Nov 08 '16 at 22:10

As already stated by a bunch of people in the comments and other answers this is absolutely bad practice. But there is also a built-in option to solve your problem with pure AngularJS using $compile.

In order to make that work you need to place everything inside a controller or directive and inject the $compile service accordingly.

You need to use the $compile service to produce a function of your dynamic HTML markup which is able to consume a scope object as a parameter in order to produce a working AngularJS template.

After inserting your template, you need to trigger the AngularJS digest cycle using $apply.

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

Insert HTML with AngularJS code inside

3 Answers3