如何在一个视图的控制器之间切换 angular js

Question

我有一个 angular 应用 with one main view 和 two main controllers 我想 toggle between 这两个控制器 depending on the button click. [=24 如何实现=]js?

完整说明： 我有一个包含一些动态文本和图表的网页。我想要英语和德语两种语言。基本上，如果语言切换为英语，我希望一个控制器更改英文文本，而另一个控制器切换为德语。我试过 Angular Translate 但我不确定如何使用它来翻译从函数返回的值，所以决定通过控制器更改它。

我通过下面的 ui-router 代码更新页面

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'
      });

Answer 1

我们有两条路线和两个控制器绑定到每条路线。您可以在两条路线之间切换：/english 和 /german。两者都有不同的控制器，都有不同的模板。

1) 如果您单击 "First View"，您将被带到 URL“#/english”，在那里您绑定了 MainFirstCtrl 这个 HTML：

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

2) 如果您单击 "First View"，您将被带到 URL“#/english”，在那里您绑定了 MainSecondCtrl 这个 HTML：

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

3) 现在使用 ui-sref 你可以改变状态：

<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) 状态在 ui-路由器配置中定义如下：

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

下面的工作示例：

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>

如何在一个视图的控制器之间切换 angular js

How can I switch between controllers for one view angular js

javascript

angularjs

angular-translate