javascript - 将 Angular 与 MVC 部分 View 混合

Question

我需要什么

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

我有什么

具有以下功能的 AngularJS Controller :

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 (表单)的内容已加载，面包屑已正确更新。

我需要修复什么

在加载的部分 View 上，有一个定义如下的按钮:

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

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

没有任何可见的错误。

关于如何使此按钮工作有什么建议吗？

Answer 1

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

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

注意:您不应该通过 Controller 操作 DOM。这被认为是不好的做法。您应该使用自定义指令或 Angular 指令的某种组合(ngIf、ngSwitch、ngInclude)。我建议观看AngularJS best practices .