Question

我在第一页有一个值，点击一个按钮后我想转到第二页并在屏幕上显示该值。两个页面共享同一个控制器，但我发现当我更改页面时会创建另一个范围。

这是我的代码：

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/tabs.html",
  controller: 'AppCtrl'
})
.state('app.one', {
  url: "/one",
  views: {
    'home-tab': {
      templateUrl: "templates/home.html",
      controller: 'AppCtrl'
    }
  }
})
.state('app.two', {
  url: "/two",
  views: {
    'home-tab': {
      templateUrl: "templates/facts.html",
      controller: 'AppCtrl'
    }
  }
});
$urlRouterProvider.otherwise("/app/one");
})

控制器：

.controller('AppCtrl', function($scope) { 
  $scope.save = function(){
   $scope.var = "foo";
 }
});

第一页只有一个执行$ scope.save的按钮，第二页有这个表达式{{var}} Codepen

我想我对某事有误解......谢谢！

Answer 1

您可以执行以下操作之一：

将逻辑移至服务。
对两种状态使用一个控制器的父状态。
将值作为参数传递给状态。

示例＃1：

＆＃13;

angular.module('app', [
    'ui.router'
  ])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
      .state('home', {
        url: '/home',
        template: '<input type="text" ng-model="var"/> <a ui-sref="one">One</a> <a ui-sref="two">Two</a>',
        controller: function($scope, myService) {
          $scope.var = myService.getVar();
          $scope.$watch('var', myService.setVar);
        }
      })
      .state('one', {
        url: '/one',
        controller: function($scope, myService) {
          $scope.var = myService.getVar();
        },
        template: '{{var}} <a ui-sref="home">Back</a>'
      })
      .state('two', {
        url: '/two',
        controller: function($scope, myService) {
          $scope.var = myService.getVar();
        },
        template: '{{var}} <a ui-sref="home">Back</a>'
      });
  })
  .service('myService', function() {
    var self = this;
    this.getVar = function() {
      return self.var;
    }
    this.setVar = function(v) {
      self.var = v;
    }
    return this;
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<div ng-app="app">
  <ui-view/>
</div>

＆＃13;

示例＃2：

＆＃13;

angular.module('app', [
    'ui.router'
  ])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/one');
    $stateProvider.state('parent', {
        abstract: true,
        controller: 'appCtrl',
        template: '<ui-view/>'
      })
      .state('parent.one', {
        url: '/one',
        template: '<div>One: {{var}}</div> <a ui-sref="parent.two">Two</a>'
      })
      .state('parent.two', {
        url: '/two',
        template: '<div>Two: {{var}}</div> <a ui-sref="parent.one">One</a>'
      });
  })
  .controller('appCtrl', function($scope) {
    $scope.var = 'MyVar'
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<div ng-app="app">
  <ui-view/>
</div>

＆＃13;

示例＃3：

＆＃13;

angular.module('app', [
    'ui.router'
  ])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider.state('home', {
        url: '/home',
        controller: function($scope) {
          $scope.var = 'MyVar';
        },
        template: '<a ui-sref="one({var: var})">One</a> <a ui-sref="two({var: var})">Two</a>'
      })
      .state('one', {
        url: '/one',
        controller: function($scope, $stateParams) {
          $scope.var = $stateParams.var;
        },
        params: {
          var: null
        },
        template: '<div>One: {{var}}</div> <a ui-sref="home">Back</a>'
      })
      .state('two', {
        url: '/two',
        controller: function($scope, $stateParams) {
          $scope.var = $stateParams.var;
        },
        params: {
          var: null
        },
        template: '<div>Two: {{var}}</div> <a ui-sref="home">Back</a>'
      });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<div ng-app="app">
  <ui-view/>
</div>

＆＃13;

Answer 2

您可以使用具有{var：$ scope.var}

对象的$ stateParams

$ state.go（'app.two'，{var：$ scope.var}）;

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/tabs.html",
      controller: 'AppCtrl'
    })
    .state('app.one', {
      url: "/one",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'AppCtrl'
        }
      }
    })
    .state('app.two', {
      url: "/two/:var",
      views: {
        'home-tab': {
          templateUrl: "templates/facts.html",
          controller: 'AppCtrl'
        }
      }
    });
   $urlRouterProvider.otherwise("/app/one");

})

.controller('AppCtrl', function($scope,$state, $stateParams) {
  $scope.platform = ionic.Platform.platform();
  
  $scope.save = function(){
    $scope.var = "foo";
    $state.go('app.two', {var: $scope.var});
  }
  
  $scope.var = $stateParams.var;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>

  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>

  <script id="templates/home.html" type="text/ng-template">
    <ion-view view-title="one">
      <ion-content class="padding">
        <p>
          <a class="button icon icon-right ion-chevron-right" ng-click="save()">Next</a>
        Click to save a value in "$scope.var"
    </p>{{var}}
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/facts.html" type="text/ng-template">
    <ion-view view-title="two">
      <ion-content class="padding">
        <p> Here should be the value of var -> {{var}}  </p>
       
      </ion-content>
    </ion-view>
  </script>

  
  
  
  
  
  
  
  
  
  

  <script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-stable" ng-class="{'tabs-positive': platform == 'android', 'tabs-icon-top': platform != 'android'}">
      <ion-tab title="one" ng-attr-icon="{{ platform != 'android' ? 'ion-home' : undefined}}" href="#/tab/home">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>
    </ion-tabs>
  </script> 

  <script>
    ionic && ionic.Platform && ionic.Platform.setPlatform("android");
  </script>
</body>

</html>

无法通过具有相同控制器Ionic 1的状态传递数据

2 个答案: