混合使用Angular和MVC的分部视图

Mixing Angular with MVC partial views

本文关键字：视图 MVC Angular 混合      更新时间：2023-09-26

我需要什么

点击一个按钮就可以打开下一个屏幕的屏幕链。以前的每个屏幕都必须折叠，新屏幕必须通过从MVC后端加载部分视图来添加。

What I have

一个AngularJS控制器，具有以下函数:

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);
            // Increase childcount 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);
        });
    };
}

UpdateScreenBreadCrumb函数工作，其他方面不相关

它被(例如)这样调用:

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

它的作用

View的内容，一个表单，被加载，面包屑被正确更新。

在加载的部分视图上，有一个这样定义的按钮:

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

点击那个按钮没有任何效果。如果我将console.log('Code was here.')添加到AddPartialView()，它不被记录。将ng-click的值直接设置为alert('hello')也没有效果。

没有任何可见的错误。

关于如何使这个按钮工作有什么建议吗?

关于你的问题，你添加的HTML不是由Angular编译的。您需要对新添加的HTML元素使用$compile，然后将其绑定到一个作用域。$compile()函数返回一个用于绑定作用域的link()函数。例子:

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

注意:你不应该通过控制器操纵DOM。这被认为是不好的做法。你应该使用自定义指令或Angular指令的组合(ngIf、ngSwitch、ngInclude)。我推荐大家观看AngularJS的最佳实践。

根据Itamar L.的建议，我研究了$compile并使其工作。我发现的示例也使用了指令，所以我还是实现了它们:

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);
                    }
                });
            }
        }
    }
]);

我这样使用它:

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

本身显示第一页，其中有一个按钮到下一页，如前所述。在collapseController中找到的相关函数如下:

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

AddChildByDirective:

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);
}
在这一点上，我仍然需要测试实际的链接，但这可以加载一个新的屏幕，并折叠之前的
相关文章：