混合 Angular 和 MVC 局部视图答案

【问题标题】：Mixing Angular with MVC partial views混合 Angular 和 MVC 局部视图
【发布时间】：2015-10-26 15:29:00
【问题描述】：

我需要什么

一个屏幕链，每个屏幕都在单击按钮时打开下一个屏幕。必须折叠之前的每个屏幕，并且必须通过从 MVC 后端加载部分视图来添加新屏幕。

我有什么

具有以下功能的 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')也没有效果。

没有任何可见的错误。

关于如何使这个按钮起作用的任何建议？

【问题讨论】：

我想我在其他地方写了一个答案，我会挖掘出来
如果您需要，这里还有一些info

标签： javascript .net asp.net-mvc angularjs asp.net-mvc-4

【解决方案1】：

关于您的问题，您添加的 HTML 不是由 Angular 编译的。您需要在新添加的 HTML 元素上使用 $compile，然后将其绑定到范围。 $compile() 函数返回一个链接() 函数，您可以使用它来绑定作用域。示例：

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

注意：您不应该通过控制器来操作 DOM。这被认为是不好的做法。您应该使用自定义指令或 Angular 指令的某些组合（ngIf、ngSwitch、ngInclude）。我推荐观看AngularJS best practices。

【讨论】：

关于 DOM 操作，这是一个有限时间的概念证明，我只想先开始工作。一旦我证明它可以做到，我就有时间正确地做到这一点。我会研究 $compile。

【解决方案2】：

按照 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);
}

此时我仍然需要测试实际的链接，但这可以加载新屏幕并折叠前一个屏幕。

【讨论】：