user
user

Reputation: 545

Handle multiple controllers with buttons

I have a menu, containing a lot of buttons. And everytime i click on a button, i want a determined controller to be displayed.

I'm a beginner with AngularJs, i'm not able to find the code for "display the XXXXCtrl"

The missing code is here :

app.controller('menuCtrl', function($scope) {
    $scope.showtest = function(key, val) {
        //display testCtrl
    }

    $scope.showCustomers = function(key, val) {
        //display customersCtrl
    }
});

see the complete code here : http://plnkr.co/edit/tYFNcYwK8uEJzZGCPQxB?p=preview

At the beginning i had only the customersCtrl, who shows the data from customersCtrl, so {{x.titre}} and the other tags were showing data, but since i added other controllers, i don't know why {{x.titre}} is not replaced anymore

Please help, i'm new to angularJs, it's a bit complicated for me :(

Upvotes: 0

Views: 60

Answers (2)

Ruan Mendes
Ruan Mendes

Reputation: 92324

One way to do it would be for your menu controller to contain the the two views you are trying to hide/show.

<div ng-app="myApp" ng-controller="menuCtrl">
  <button href="#" ng-click="showtest()">display testCtrl</button>
  <button href="#" ng-click="showCustomers()">display customersCtrl</button>
  <div ng-controller="testCtrl" ng-show="showTestView">...</div>
  <div ng-controller="customersCtrl" ng-show="showCustomerView">...</div> 
</div>

Then in your controller, you could do

$scope.showtest = function(key, val) {
    $scope.showTestView = true;
}

$scope.showCustomers = function(key, val) {
    $scope.showCustomerView = true;
}

See http://plnkr.co/edit/k6YScPNv6SmxWuG3GIfv?p=preview

Upvotes: 1

Daniel Silva
Daniel Silva

Reputation: 379

Take a look at $route documentation. There is a good example at the end of the page about switching controllers through route navigation.

You may give special attention to sample's script.js that configure the $routeProvider.

Let me know if this helps.

Upvotes: 0

Related Questions