Combining Angular with MVC partial views

Question

Combining Angular with MVC partial views

What I'm Looking For

I require a sequence of interactive screens that progress to the next screen upon button click. Each previous screen should collapse while loading the new screen using a partial view from the MVC backend.

My Current Setup

Currently, I have an AngularJS controller with the following function:

self.AddChild = function (uri, targetContainerId, collapseTitle, breadCrumbContainerId) {
    var target = $("#" + targetContainerId);

    if (target != 'undefined' && target != undefined && target.length > 0) {
        apiService.Get(uri).then(function (viewData) {
            self.CollapsePreviousChild(self.ChildCount);

            // Increment child count by 1
            self.ChildCount += 1;

            // Set HTML data
            var html = '<div id="collapsibleScreen-"' + self.ChildCount + ' class="open">' + viewData + '</div>';

            target.html(html);

            // Update screens collapse status
            self.UpdateScreenBreadCrumb(collapseTitle, breadCrumbContainerId);
        });
    };
}

The UpdateScreenBreadCrumb function is operational and independent.

This function can be called as follows:

self.AddChild("/Partials/View1", "targetContainer", "View", "breadCrumbContainer");

Current Functionality

The View's content, a form, is successfully loaded and the breadcrumb is accurately updated.

Issue To Be Addressed

Within the loaded partial view, there exists a button defined like this:

<button class="btn btn-primary" ng-click="AddPartialView()">Add partial view</button>

Unfortunately, clicking on this button does not trigger any action. Even adding a console.log('Code was here.') within AddPartialView() shows no output. Similarly, setting the ng-click value directly to alert('hello') yields no results either.

No visible errors are present.

Do you have any suggestions for making this button functional?

javascript .net asp.net-mvc angularjs asp.net-mvc-4

Answer 1

Answer №1

When it comes to your query, you are inserting HTML code that Angular isn't interpreting. It is necessary to utilize $compile on the newly added HTML element and then connect it to a scope. The $compile() function provides a link() function that should be used for scope binding. Here's an example:

$compile(new-element)(scope-to-bind-to)

IMPORTANT: Manipulating the DOM directly in a controller is not recommended as it is considered poor practice. It is advisable to use a custom directive or a combination of Angular directives (ngIf, ngSwitch, ngInclude). I suggest checking out AngularJS best practices.

Answer 2

When it comes to your query, you are inserting HTML code that Angular isn't interpreting. It is necessary to utilize $compile on the newly added HTML element and then connect it to a scope. The $compile() function provides a link() function that should be used for scope binding. Here's an example:

$compile(new-element)(scope-to-bind-to)

IMPORTANT: Manipulating the DOM directly in a controller is not recommended as it is considered poor practice. It is advisable to use a custom directive or a combination of Angular directives (ngIf, ngSwitch, ngInclude). I suggest checking out AngularJS best practices.

Answer 3

Answer №2

After taking Itamar L.'s advice and delving into $compile, I managed to make it function properly. Despite the examples I came across utilizing Directives, I decided to incorporate them nonetheless:

angular.module('directives.api').directive("PartialViewLoader", [
    '$compile',
    'chainedScreensService',
    function (
        $compile,
        chainedScreensService) {
        return {
            restrict: 'A',
            scope: {
                view: '=',
                parent: '='
            },
            controller: function() {
            },
            link: function (scope, element, attrs) {

                chainedScreensService.GetPartialView(attrs.view).then(function (viewData) {
                    var linkFunc = $compile(viewData);
                    var content = linkFunc(scope);
                    element.append(content);

                    if (attrs.parent != 'undefined' && attrs.parent != undefined && attrs.parent.length > 0) {
                        chainedScreensService.CollapsePartialByIdentifier(attrs.parent);
                    }
                });
            }
        }
    }
]);

This is how I implement it:

<div ng-controller="collapseController">
    <div id="breadCrumbContainer" style="display: inline"></div>
    <div id="mainContainer">
        <div id="personContainer" partial-view-loader view="persoon" parent="" class="open"></div>
    </div>
</div>

With this setup, the first page is displayed, featuring a button that leads to the next, as previously mentioned. The corresponding function, located in the collapseController, looks like this:

self.AddNextScreen = function (parentViewIdentifier, targetContainerId, breadCrumbContainerId) {
    self.AddChildByDirective("NextScreen", parentViewIdentifier, targetContainerId, breadCrumbContainerId);
}

The snippet for AddChildByDirective is as follows:

self.AddChildByDirective = function (viewIdentifier, parentViewIdentifier, targetContainerId, breadCrumbContainerId) {
    var html = '<div id="' + viewIdentifier + 'Container" fvl-partial-view-loader view="' + viewIdentifier + '" parent="' + parentViewIdentifier + '" class="open"></div>';

    var target = $('#' + targetContainerId);

    var linkFunc = $compile(html);
    var content = linkFunc($scope);
    target.append(content);

    self.UpdateScreenBreadCrumb(viewIdentifier, breadCrumbContainerId);
}

Although I have yet to test the actual chaining process, this method effectively loads a new screen while collapsing the previous one.

Answer 4

After taking Itamar L.'s advice and delving into $compile, I managed to make it function properly. Despite the examples I came across utilizing Directives, I decided to incorporate them nonetheless:

angular.module('directives.api').directive("PartialViewLoader", [
    '$compile',
    'chainedScreensService',
    function (
        $compile,
        chainedScreensService) {
        return {
            restrict: 'A',
            scope: {
                view: '=',
                parent: '='
            },
            controller: function() {
            },
            link: function (scope, element, attrs) {

                chainedScreensService.GetPartialView(attrs.view).then(function (viewData) {
                    var linkFunc = $compile(viewData);
                    var content = linkFunc(scope);
                    element.append(content);

                    if (attrs.parent != 'undefined' && attrs.parent != undefined && attrs.parent.length > 0) {
                        chainedScreensService.CollapsePartialByIdentifier(attrs.parent);
                    }
                });
            }
        }
    }
]);

This is how I implement it:

<div ng-controller="collapseController">
    <div id="breadCrumbContainer" style="display: inline"></div>
    <div id="mainContainer">
        <div id="personContainer" partial-view-loader view="persoon" parent="" class="open"></div>
    </div>
</div>

With this setup, the first page is displayed, featuring a button that leads to the next, as previously mentioned. The corresponding function, located in the collapseController, looks like this:

self.AddNextScreen = function (parentViewIdentifier, targetContainerId, breadCrumbContainerId) {
    self.AddChildByDirective("NextScreen", parentViewIdentifier, targetContainerId, breadCrumbContainerId);
}

The snippet for AddChildByDirective is as follows:

self.AddChildByDirective = function (viewIdentifier, parentViewIdentifier, targetContainerId, breadCrumbContainerId) {
    var html = '<div id="' + viewIdentifier + 'Container" fvl-partial-view-loader view="' + viewIdentifier + '" parent="' + parentViewIdentifier + '" class="open"></div>';

    var target = $('#' + targetContainerId);

    var linkFunc = $compile(html);
    var content = linkFunc($scope);
    target.append(content);

    self.UpdateScreenBreadCrumb(viewIdentifier, breadCrumbContainerId);
}

Although I have yet to test the actual chaining process, this method effectively loads a new screen while collapsing the previous one.

Combining Angular with MVC partial views

Answer №1

Answer №2

Similar questions

When comments are submitted via AJAX, they are displayed twice, but upon reloading the page, they only appear once

Determining Field of View (FOV) for a perspective camera in ThreeJS following a browser window resize

Commitments and incorporating items from an array into objects nested within a separate array

The response from the Ajax request showed that the data was not

Steps to update the color of checkbox labels

Assign a class to an element depending on its position using JavaScript/jQuery

JS function to reverse a string

Error in Postman: Express and Mongoose throwing 'name' property as undefined

Leveraging the "selected" attribute within a directive

What is the number of times the compile function is invoked when using the same directive multiple times in HTML?

efficiently manage various nested levels of request parameters

A guide on resolving the TypeError 'download property of undefined' issue when using Puppeteer with browser.downloads.download

Best Way to Eliminate "#" Symbol from URL Address in UI-Router

Executing scripts within various node project directories using npm

Using browser's local storage: deleting an entry

Error: An unexpected identifier was found within the public players code, causing a SyntaxError

How can I showcase CSV data as clickable links and images on a website using HTML?

What is the process for redirecting an API response to Next.js 13?

Converting JSON to CSV using Angular

Emulating user interaction using Prototype library - Simulate.js