Question

我熟悉设置angularjs项目的标准方法，我正在尝试做的是根据页面为不同的控制器和指令设置单独的文件。请参阅下文以获得更好的解释。

www /
   app.js
   index.html
    login /
         loginDirective.js
         loginPage.html

这是我的apps.js文件

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'

(function () {
   'use strict';
    angular.module('app', ['ionic']);

})();


var app=angular.module('app');

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

这是我的loginDirective.js

(function () {
    'use strict';

    var app=angular.module('app');

app.config(function($stateProvider) {

$stateProvider

.state('login', {
    url: '/login',
    template: '<loginDirective></loginDirective>'
})
})
    app.directive('loginDirective', loginDirective);

function loginDirective() {
    var directive = {
        restrict : 'EA',
        templateUrl : 'loginPage.html',
        controller : loginController,
        controllerAs : 'lg',
        bindToController : true
};

return directive;

}

function loginController() {
var lg = this;
lg.test = 'this is a test';

console.log('RETURN = %s', 'test');

}

})();

这是我的index.html

 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="login/loginDirective.js"></script>
  </head>
  <body ng-app="app" animation="slide-left-right-ios7">
<div>
    <div>
          <ion-nav-bar class="bar-dark">
        <ion-nav-title>Sample APP</ion-nav-title>
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
      </ion-nav-bar>
<ion-nav-view ></ion-nav-view>
</div>s
</div>
  </body></html>

最后但并非最不重要的是loginPage.html

<html>
<head>
</head>
<body>
<div login-directive></div>
<ion-view view-title="Login" name="login-view" class="scroll-bg" hide-nav-bar="true">
  <ion-content class="padding">
  <div  align="center" class="imagecontent">
   <div style="text-align: center">
  <img ng-src="img/logos@2x.png" width="250px">
  </div>
  </div>
      <div class="list list-inset">
          <label class="item item-input">
              <input type="text" placeholder="Username" style="color: #ffffff" ng-model="data.username">
          </label>
          <label class="item item-input">
              <input type="password" placeholder="Password" style="color: #ffffff" ng-model="data.password">
          </label>
      </div >
      <div class="" >
      <div  class="">
      <button class=" button  button-block button-dark" ng-click="login(data)">LOG IN</button>
      </div>
      </div>

  </ion-content>
    <div style="position: absolute; bottom: 10%; width: 100%">
      <div style="text-align: center">
        <img ng-src="img/FNC_Logo.png" width="150px">
        </div>
        </div>
  <ion-footer-bar align-title="right" class="footer-bg">
        <div class="col text-right" ng-click="doSomething()">
    <button class="button footerbtn-bg" ></button>
  </div>
</ion-footer-bar>
</ion-view>
</body>
</html>

我做错了什么导致我的loginPage.html没有显示？

Answer 1

我可能错了，因为我是AngularJS的新手，但如果我是你，我首先会尝试改变：

templateUrl : 'loginPage.html'

成：

templateUrl : 'login/loginPage.html'

我得出了这样的结论，因为你在index.html中包含了loginPage.js文件，因此它会尝试在www目录中查看loginPage.html，或者在调用它的目录中查看。我今天遇到了像你这样的情况，但有图像。

Answer 2

您的州定义存在问题：

$stateProvider

.state('login', {
    url: '/login',
    //This should be kebab-case
    template: '<login-directive></login-directive>'
    //NOT camelCase
    //template: '<loginDirective></loginDirective>'
})
})

但是当你可以用控制器定义状态时，我不确定你为什么要使用该状态的指令：

.state('login', {
    url: '/login',
    templateUrl : 'loginPage.html',
    controller : loginController,
    controllerAs : 'lg'
 });

Answer 3

尝试将<div login-directive></div>移动到离子视图中。

同时检查控制台以查看是否实际输出了console.log('RETURN = %s', 'test');。至少你知道这个州是否有效。

就像@georgeawg所说，你通过使用指令作为模板来解决这个问题。为什么你在这个例子中这样做是超出我的。此外，您的$ state配置应该在您的app.js文件中。

如何正确设置AngularJS文件

3 个答案: