将Angular与MVC部分视图混合

Question

我需要的

一系列屏幕，每个屏幕单击一次即可打开下一个屏幕。 每个先前的屏幕都必须折叠，并且必须通过从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");

它能做什么

视图的内容（窗体）已加载，面包屑已正确更新。

我需要解决的问题

在已加载的局部视图上，有一个定义如下的按钮：

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

单击该按钮没有任何作用。 如果我将console.log（'代码在这里。'）添加到AddPartialView（），则不会记录它。 将ng-click值直接设置为alert（'hello'）也不起作用。

没有任何可见的错误。

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

Answer 1

关于您的问题，您要添加的不是Angular编译的HTML。 您需要在新添加的HTML元素上使用$ compile，然后将其绑定到作用域。 $ compile（）函数返回一个link（）函数，您可以使用该函数将作用域绑定到该函数。 例：

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

注意 ：您不应该通过控制器来操作DOM。 这被认为是不良做法。 您应该使用自定义指令或Angular指令的某些组合（ngIf，ngSwitch，ngInclude）。 我建议观看AngularJS最佳实践 。

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

如前所述，它本身会显示第一页，其中的下一页具有按钮。 在crashController中找到的关联函数是这样的：

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

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