Question

我安装了离子及其示例应用程序使用以下两个代码管理视图：

App.js

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

// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})

// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
  'tab-dash': {
    templateUrl: 'templates/tab-dash.html',
    controller: 'DashCtrl'
  }
}
})

.state('tab.chats', {
  url: '/chats',
  views: {
    'tab-chats': {
      templateUrl: 'templates/tab-chats.html',
      controller: 'ChatsCtrl'
    }
  }
})
.state('tab.chat-detail', {
  url: '/chats/:chatId',
  views: {
    'tab-chats': {
      templateUrl: 'templates/chat-detail.html',
      controller: 'ChatDetailCtrl'
    }
  }
})

.state('tab.account', {
url: '/account',
views: {
  'tab-account': {
    templateUrl: 'templates/tab-account.html',
    controller: 'AccountCtrl'
  }
}
});

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');

});

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>

<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>

<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>

</ion-tabs>

例如，如果我在选项卡中的输入中写入内容，当我更改选项卡时以及当我返回时，我的“某事”总是在输入中。

如何在没有Ionic的情况下将此方法仅用于AngularJS？

编辑2：
我试过这段代码：

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="js/angular-ui-router.min.js"></script>
</head>
<body>
<div ui-view="state1"></div>
<div ui-view="state2"></div>
<a ui-sref="state1">State1</a> - <a ui-sref="state2">State2</a>
</body>
<script>
    var myApp = angular.module('myApp', ['ui.router']);
    myApp.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/state1');

        $stateProvider
                .state('state1',{
                    url: "/state1",
                    views: {
                        'state1': {
                            template: 'State 1: <input type="text">'
                        }
                    }
                })
                .state('state2',{
                    url: "/state2",
                    views: {
                        'state2': {
                            template: 'State 2: <input type="text">'
                        }
                    }
                })
    });
</script>
</html>

但它不起作用。离子使用类似的方法，我认为，它的工作原理。我需要创建两个（或更多）视图来保持更改和输入。

Answer 1

您可以使用服务或工厂在状态之间传递数据，请参阅此处演示＃

http://plnkr.co/edit/rPpZhbpns7OUeZURJNJQ?p=preview

即：

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

myApp.factory('RandomFactory', function() {
  return "Hello there";
});

myApp.config(function($stateProvider, $urlRouterProvider) {
  //
  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/state1");
  //
  // Now set up the states
  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "state1.html",
      controller: function($scope, dataService) {

        $scope.user = dataService.user;

      }
    })

  .state('state2', {
    url: "/state2/",
    templateUrl: "state2.html",
    controller: function($scope, dataService) {

      $scope.user = dataService.user;
    }

  });


});

myApp.factory('dataService', function() {

  var user = {};
  return {
    user: user
  }
})

只有角度的离子视图

1 个答案: