Question

我有一个用AngularJS编写的SPA。主页面使用ng-include属性来确定要加载的视图。当有人点击主页面中包含的菜单时，这是在JavaScript中设置的。但是，我遇到过这样一种情况：我需要通过点击另一个视图中的按钮来加载不同的视图，基本上替换它。

我试图弄清楚如何做到这一点，并且根据我的研究，我必须在子视图和$ rootScope中使用$ rootScope和$ emit或$ broadcast调用。 $ on检测此事件的方法。

问题是，这似乎不起作用。我设置了断点并逐步完成了代码，但我总是遇到这个错误：

错误：[ngModel：datefmt] http://errors.angularjs.org/1.5.7/ngModel/datefmt?p0=2009-07-21T00%3A00%3A00

这是我的父页面控制器中的代码：

$rootScope.$on('viewChanged', function () {
    var menuItem = {
        template: 'customerOrders.html' // will be eventually dynamic
    };

    navigate(menuItem);
});

function navigate(menuItem) {
    $scope.activeMenuItem = menuItem;
}

<div data-ng-include="activeMenuItem.template"></div>

在子页面控制器中：

function changeSelectedView(viewTemplate) {
    $rootScope.$emit('selectedViewChanged', viewTemplate);
}

显然我在这里做错了。我如何实现我想要的，或者有一种完全不同的方式来做到这一点？

Answer 1

您可以使用ng-route在视图之间工作。检查https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider

Answer 2

First of all, the event name in the $emit function and in the $on function did not match, so I made that fix.

function navigateToNewTemplate(event, viewTemplate) {
    var menuItem = {
        template: buildTemplateUrl(viewTemplate)
    };

    navigate(menuItem);
}

$rootScope.$on('selectedViewChanged', navigateToNewTemplate);

function changeSelectedView(viewTemplate) {
    $rootScope.$emit('selectedViewChanged', viewTemplate);
}

如何在AngularJS中用另一个子视图替换子视图

2 个答案: