简单求和函数在jsfiddle中有效但在离子上不起作用我缺少什么？

时间：2015-08-21 19:51:02

标签： cordova ionic-framework ionic

嘿伙计，所以我有以下代码，这是一个简单的求和函数，从html中获取3个值并添加它们，它在jsfiddle上运行得很好：

app.js 

angular.module('calculator', [])

 
//=========================================================================


  .controller('CalculatorCtrl', function ($scope) {

    $scope.a = 1;
    $scope.b = 1;
    $scope.x = 1;

    $scope.result = function () {

      var answer = 0;

      answer =  $scope.a + $scope.b + $scope.x;

      return answer;

    }

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="calculator-div"  ng-app="calculator" ng-controller="CalculatorCtrl">

      <div class="row">
        <div class="col" id="calculator-title">Calcular Y</div>
      </div>

      <div class="row">

        <div class="col">
          <label class="item item-input item-floating-label">
            <input type="number" placeholder="{{a}}" ng-model="a">
          </label>
        </div>

        <div class="col col-10 ion-arrow-right-b"></div>

        <div class="col">
          <label class="item item-input item-floating-label">
            <input type="number" placeholder="{{x}}" ng-model="x">
          </label>
        </div>

      </div>

      <div class="row">

        <div class="col">
          <label class="item item-input item-floating-label">
            <input type="number" placeholder="{{b}}" ng-model="b">
          </label>
        </div>

        <div class="col col-10 ion-arrow-right-b"></div>

        <div class="col">
          <label class="item item-positive item-floating-label" id="result">
            {{result()}}
          </label>
        </div>

      </div>
    </div>

这是我在Ionic中的代码： 的 HTML 

<!DOCTYPE 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">

  <!-- 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>

</head>

<body ng-app="calculator" ng-controller="CalculatorCtrl">

<ion-pane>


  <ion-content>

    <div class="row">
      <div class="col description">En la regla de tres, se establece la relación de proporcionalidad entre dos
        valores conocidos, por ejemplo: A y B, y conociendo un tercer valor X, podemos calcular un cuarto valor Y.
      </div>
    </div>

    <div id="calculator-div">

      <div class="row">
        <div class="col" id="calculator-title">Calcular Y</div>
      </div>

      <div class="row">

        <div class="col">
          <label class="item item-input item-floating-label">
            <input type="number" placeholder="{{a}}" ng-model="a">
          </label>
        </div>

        <div class="col col-10 ion-arrow-right-b"></div>

        <div class="col">
          <label class="item item-input item-floating-label">
            <input type="number" placeholder="{{x}}" ng-model="x">
          </label>
        </div>

      </div>

      <div class="row">

        <div class="col">
          <label class="item item-input item-floating-label">
            <input type="number" placeholder="{{b}}" ng-model="b">
          </label>
        </div>

        <div class="col col-10 ion-arrow-right-b"></div>

        <div class="col">
          <label class="item item-positive item-floating-label" id="result">
            {{result()}}
          </label>
        </div>

      </div>
    </div>

    <div class="row">

      <div class="col">

        <p>Si necesito {{x}} zanahorias para alimentar {{a}} conejos, ¿cuántas zanahorias necesito para
        alimentar {{b}} conejos?</p>

        A= {{a}}
        B= {{b}}
        X= {{x}}
      </div>
    </div>

  </ion-content>

</ion-pane>

</body>

</html>

这就是我的 app.js 的样子：

angular.module('calculator', ['ionic'])

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

//=========================================================================


  .controller('CalculatorCtrl', function ($scope) {

    $scope.a = 0;
    $scope.b = 0;
    $scope.x = 0;

    $scope.result = function () {

      var answer = 0;

      answer =  $scope.a + $scope.b + $scope.x;

      return answer;

    }

  });

我完全无能为力，为什么它适用于jsfiddle而不是Ionic请帮助这是我的应用程序的外观： enter image description here

1 个答案:

答案 0 :(得分：1)

解决方案1 ​​

将 ng-controller =＆＃34; CalculatorCtrl＆＃34; 移至ion-content指令，如下所示：

<ion-content ng-controller="CalculatorCtrl">

我已使用以下网址在浏览器和实时设备中对其进行了测试：

ionic serve

和

ionic run android -l -c -s

工作示例：http://plnkr.co/edit/cefQpR?p=preview

解决方案2

这是一个特定的离子框架问题。从技术上讲，如果要在ion-content指令中使用变量，则必须使用点表示法。所以不要使用原始变量，使用对象。此解决方案将与body标签中的控制器一起使用。

工作示例：http://plnkr.co/edit/Dsksel?p=preview

相关问题
最新问题