How can I switch between controllers for one view angular js

Question

I have an angular app with one main view and two main controllers I would like to toggle between these two controllers depending on the button click. How is this achievable with angularjs?

Full Explanation: I have a webpage that has some dynamic text and chart. I would like to have in two languages English and German. Basically I want one controller to change English text if the language is switched to English and the other one German. I have tried Angular Translate But I am not sure how to use it to translate values returning from functions, so decided to change it via controller.

I update the page via ui-router my code below

function routerConfig($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainController',
        controllerAs: 'main'
      })
      .state('line', {
        url: '/lineChart',
        templateUrl: 'app/simplerChart/simplerChart.html',
        controller: 'SimpleChartController'
      });

I think it in not the best approach. you can use angular-translate ( github.com/angular-translate/angular-translate ) in controller without probleme . for example : var text1='hello worl'; $scope.myvar = $filter('translate')(text1); — AlainIb
– AlainIb, Commented Mar 18, 2016 at 14:59
How do you bind controller to the view? 1) Using ng-controller="myCtrl"? 2) Controller is binded to view inside router? — Michael Money
– Michael Money, Commented Mar 18, 2016 at 15:01
@Imo Could you update your question with this router config? — Michael Money
– Michael Money, Commented Mar 18, 2016 at 15:09
@AlainIb: Do you know a more comrehensive example of this.. would be very helpful — Imo
– Imo, Commented Mar 18, 2016 at 15:09

Michael Money · Accepted Answer · 2016-03-18 15:57:15Z

We got two routes and two controllers bind to each route. You can toggle between two routes: /english and /german. Both got different controllers, both got different templates.

1) If you click "First View" you will be taken to URL "#/english" where you got binded MainFirstCtrl to this HTML:

<div  style="background: mediumpurple">{{ctrl.title}}</div>

2) If you click "First View" you will be taken to URL "#/english" where you got binded MainSecondCtrl to this HTML:

<div style="background: yellowgreen">{{ctrl.title}}</div>

3) Now using ui-sref you can change states:

<button type="button" ui-sref="first">Go to First View (/english)</button>
<button type="button" ui-sref="second">Go to Second View (/german)</button>

4) States are defined in ui-router config like this:

$stateProvider.state('first', {
    url: '/first',
    template: '<div  style="background: mediumpurple">{{ctrl.title}}</div>',
    controller: 'MainFirstCtrl',
    controllerAs: 'ctrl'
});

Working example below:

var myapp = angular.module('myapp', ['ui.router']);


//Here are our routes defined
myapp.config(['$stateProvider', function ($stateProvider) {
    $stateProvider.state('first', {
        url: '/english',
        template: '<div class="view" style="background: mediumpurple">{{ctrl.title}}</div>',
        controller: 'MainFirstCtrl',
        controllerAs: 'ctrl'
    });

    $stateProvider.state('second', {
        url: '/german',
        template: '<div class="view" style="background: yellowgreen">{{ctrl.title}}</div>',
        controller: 'MainSecondCtrl',
        controllerAs: 'ctrl'
    });


}]);

//Here are our two different controllers that would control the same view BUT with different routes
myapp.controller('MainFirstCtrl', ['$scope', function($scope) {
    this.title = 'This is english view';
}]);

myapp.controller('MainSecondCtrl', ['$scope', function($scope) {
    this.title = 'This is german view';

}]);

button {
  background: #1e6791;
    border: 0;
    color: #fff;
    padding: 15px 20px;
    font-family: arial;
    font-size: 15px;
    margin: 15px 0px;
    box-shadow: 0px 0px 1px rgba(0,0,0,.3);
  }

.view {
  width:300px;
  height:150px;
}

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
</head>
<body ng-app="myapp">

<button type="button" ui-sref="first">Go to First View (/english)</button>
<button type="button" ui-sref="second">Go to Second View (/german)</button>

<div ui-view></div>

<div show-contact></div>
</body>
</html>

Collectives™ on Stack Overflow

How can I switch between controllers for one view angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related