Use angular in Partial view

Question

I got this code that calls a method and returns a partial view:

var rendered = false;
    $("#quicktodo").click(function () {

        if (!rendered) {
            $.ajax({
                url: '/Home/GetTodoPartial',
                dataType: 'html',
                success: function (data) {
                    $('#_qtd').html(data).hide().slideDown('400');
                    rendered = true;
                }
            });
        } else {
            $('#_qtd').html("");
            rendered = false;
        }

    });

The data is a partial view that looks like this:

<div ng-app>
    <div ng-controller='HelloController'>
        <p>{{greeting.text}}, World</p>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script>

    function HelloController($scope) {
        $scope.greeting = { text: 'Hello' };
    }
</script>

My problem is that the Angular dont seem to work in my partial-view, any suggestions on why? Thanks!

Angularjs works very different than basic jquery like sollutions. Checkout the tutorial https://docs.angularjs.org/tutorial — Andre Paap, Aug 13 '14 at 13:11
Thank you, Nevermind the differences between jquery and angular. I´m simply wondering If its possible to use angular in a partial view thats rendered inside of a div or if its a lost cause trying. — user2915962, Aug 13 '14 at 13:16
It is very well possible. The angular documentation consists out of a lot of different angular applications. Check this page https://docs.angularjs.org/api. If you examine it, you will find a lot of little angular applications. Defining a angular application takes just a bit more code that your example. — Andre Paap, Aug 13 '14 at 13:32
I would guess your ng-app occures now two times? one in the main template and one in your partial view. Maybe this will help: http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page — Rumplin, Aug 13 '14 at 13:36
Thats one of the things..Im not sure where to place ng-app? Inte the partial or in the div where the partial gets rendered. Thank you both for trying to help, im looking through your suggestions. — user2915962, Aug 13 '14 at 13:42

score 0 · Answer 1 · answered Aug 13 '14 at 14:16

You juste have to create an angular application first.

Then in your index.html, you have to define your ng-view

<div class="view-container">
    <div ng-view class="view-frame"></div>
</div>

ng-view div will display your partial view. So you have to create for example partial1.html and partial2.html.

Then, you have to define your routes. It's explained here: https://docs.angularjs.org/tutorial/step_07

Use angular in Partial view

1 Answers1