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
– Mikkel, Commented Nov 8, 2016 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
– Rayner Ulloa, Commented Nov 8, 2016 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
– Claies, Commented Nov 8, 2016 at 21:00
Possible duplicate of Insert an angular js template string inside an element — Heretic Monkey
– Heretic Monkey, Commented Nov 8, 2016 at 21:48

zee · Accepted Answer · 2016-11-08 20:34:57Z

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 8, 2016 at 20:34

zee

6662 gold badges7 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rayner Ulloa Over a year ago

Thank you but I looking for something else, is more focus to generate dynamic html code that contain Angularjs tags inside.

Rayner Ulloa · Accepted Answer · 2016-11-08 21:43:16Z

0

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>

answered Nov 8, 2016 at 21:43

Rayner Ulloa

11 bronze badge

1 Comment

Claies Over a year ago

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.

Daniel · Accepted Answer · 2016-11-08 22:10:37Z

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>

Collectives™ on Stack Overflow

Insert HTML with AngularJS code inside

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related