Question

我正在尝试在加载应用时从模板文件夹中获取仪表板视图。我正在使用离子框架工作。

我的索引

  <body ng-app="starter">

<ion-pane>
  <ion-header-bar class="bar bar-header bar-dark main-header">
    <h1 class="title main-header-title"><strong>Recharge Plans</strong></h1>
  </ion-header-bar>
  <ion-nav-view></ion-nav-view>
</ion-pane>

我的app.js

    angular.module('starter', ['ionic','starter.controller','starter.service'])

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

$stateProvider
  .state('dash', {
    url: '/dash',
    views: {
      'dash': {
        templateUrl: '/templates/dash.html',
        controller: 'DashCtrl'
      }
    }
  });
$urlRouterProvider.otherwise('/dash');
});

我的controller.js

    angular.module('starter.controller',[])

.controller('DashCtrl', function($scope) {
alert("ok");
})

在'www \ templates'中，我有一个名为dash.html的文件。

我的dash.html

<ion-view ng-controller="DashCtrl">
  <ion-content>
        <div class="list searc-panel">
            <label class="item item-input item-select">
                <div class="input-label">
                  Select Operator
                </div>
                <select>
                  <option>Select</option>
                  <option>Airtel</option>
                  <option>Vodafone</option>
                </select>
            </label>            
            <label class="item item-input item-select">
                <div class="input-label">
                  Select State
                </div>
                <select>
                  <option>Select</option>
                  <option>West bengal</option>
                  <option>Kolkata</option>
                </select>
            </label>
            <button class="button button-full button-positive">
              Search My Plans
            </button>
        </div>
  </ion-content>
</ion-view>

但是当我在浏览器中点击'file：/// C：/Users/Sanjeev/RechargePlans/www/index.html'然后它会将我呈现为'file：/// C：/ Users / Sanjeev / RechargePlans / www / index.html＃/ dash'，空白视图。

我想念的是什么？

Answer 1

如果您要使用Ionic命名您的视图，那么您的离子视图选项卡HTML需要如下所示：

<ion-nav-view name="you-view-name"></ion-nav-view>

通常使用Ionic应用程序，您拥有根状态，所有内容都会因此而产生，所以：

app.js文件：

angular.module('starter', ['ionic','starter.controller','starter.service'])

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

        $stateProvider
            .state('root', {
                url: '/',
                templateUrl: '/templates/tabs.html',
                controller: 'rootCtrl'
                }
             });
            .state('root.dash', {
                url: '/dash',
                views: {
                    'dash': {
                        templateUrl: '/templates/dash.html',
                        controller: 'DashCtrl'
                     }
                }
             });
         $urlRouterProvider.otherwise('/dash');
     });

的index.html：

<ion-nav-view></ion-nav-view>

tabs.html：

<ion-nav-view name="dash"></ion-nav-view>

在任何情况下，如果您要对视图进行命名，则您的离子视图HTML标记需要具有名称属性，其中包含视图的名称。

希望这有帮助

Answer 2

你不应该通过“file：/// C：/Users/Sanjeev/RechargePlans/www/index.html”运行离子应用程序。你应该使用离子cli工具来运行你的离子项目。转到cmd＆gt;导航到项目文件夹，然后运行ionic serve，您将能够看到输出。

Angular url config不适用于离子框架

2 个答案: