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

我有一个用AngularJS编写的SPA。主页面使用ng-include属性来确定要加载哪个视图。当用户点击包含在主页面中的菜单时，这是用JavaScript设置的。但是，我遇到了一种情况，我需要通过单击另一个视图中的按钮来加载其他视图，从而实质上替换它。如何用AngularJS中的另一个替换子视图

我想弄清楚如何做到这一点，从我研究过的，我必须使用$ rootScope和子视图中的$ emit或$ broadcast调用和$ rootScope。$ 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); 
}

很显然，我错在这里做一些事情。我如何完成自己想要的功能，或者是否有完全不同的方式来完成这个任务？

来源

2016-07-28 DesertFoxAZ

你的错误似乎是无关紧要了，你的问题虽然 – doge1ord

我知道，这不，日期错误之前我按一下按钮发生，因为在页面日期字段任何意义 – DesertFoxAZ

我的坏这显然不允许空值。让我先看看解决这个问题。 – DesertFoxAZ

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

来源

2016-07-28 19:29:37

当我不使用路由时，这是否相关？这是一个单页面应用程序。 – DesertFoxAZ

@DesertFoxAZ是的。 'ng-route'不会改变页面。它只是改变页面中的视图。您可以通过一些输入在SPA中的多个视图之间切换。 –

首先，$ emit函数中的事件名称和$ on函数中的事件名称不匹配，所以我做了该修复。

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

    navigate(menuItem); 
} 

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

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

来源

2016-07-28 20:20:53 DesertFoxAZ

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

回答

相关问题