So ersetzen Sie eine untergeordnete Ansicht durch eine andere in AngularJS

Question

Ich habe ein SPA in AngularJS geschrieben. Die Hauptseite verwendet ein ng-include-Attribut, um zu bestimmen, welche Ansicht geladen werden soll. Dies wird in JavaScript festgelegt, wenn jemand auf ein Menü klickt, das auf der Hauptseite enthalten ist. Ich bin jedoch auf eine Situation gestoßen, in der ich eine andere Ansicht laden muss, indem ich auf eine Schaltfläche innerhalb einer anderen Ansicht klicke und sie im Wesentlichen ersetze.

Ich versuche herauszufinden, wie dies zu tun ist und von was ich recherchiert habe, muss ich $ rootScope und entweder einen $ emit oder $ Broadcast-Aufruf in der untergeordneten Ansicht und eine $ rootScope. $ On Methode verwenden um dieses Ereignis zu erkennen.

Die Sache ist, das scheint nicht zu funktionieren. Ich habe meine Haltepunkte setzen und durch den Code trat, aber ich bekomme immer diese Fehlermeldung:

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

Hier ist der Code in meiner Eltern Seite Controller:

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

In der untergeordneten Seite Controller:

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

Offensichtlich mache ich hier etwas falsch. Wie erreiche ich, was ich will, oder gibt es einen ganz anderen Weg?

Answer 1

können Sie ng-route verwenden, um zwischen Ansichten zu arbeiten. check https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider

Answer 2

Zunächst einmal, der Ereignisname in der Funktion $ emit und in der $ on-Funktion stimmte nicht überein, also machte ich das beheben.

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

    navigate(menuItem); 
} 

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

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