简体   繁体   English

无法弄清楚为什么我的角度代码不能与Ionic框架和Intel XDK一起使用

[英]Can't figure out why my angular code is not working with Ionic framework and Intel XDK

I've created a Ionic project in Intel XDK, I started setting up my navigation bar with buttons, I added a status button which will cycle and change the label from available, away and busy when the button is clicked. 我已经在Intel XDK中创建了一个Ionic项目,我开始使用按钮设置导航栏,添加了一个状态按钮,当单击该按钮时,该按钮将循环显示和更改标签,从可用状态变为离开状态。

I started out small and wanted to insert a string through a scope variable I defined in my JavaScript app.js. 我从小开始,想通过我在JavaScript app.js中定义的作用域变量插入字符串。 I can't seem to get it working. 我似乎无法正常工作。 app.js is defined in my head tags and I ng-app inside my div where my button lives. app.js定义在我的head标签和ng-app定义在我的按钮所在的div中。 I feel as if the angular.js bundled in ionic is not working for some reason, Here's a section of my code. 我觉得由于某种原因,捆绑在ionic中的angular.js似乎无法正常工作,这是我的代码的一部分。

HTML: HTML:

<!DOCTYPE html>

<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="marginal/marginal-position.js"></script>
<script type="application/javascript" src="js/index_init_services.js"></script>
<script type="application/javascript" src="js/index_uib_w_8_popover.js"></script>
<script type="application/javascript" src="js/index_uib_w_10_popover.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
<script type="application/javascript" src="sidebar/js/swipe.js"></script>
<script type="application/javascript" src="js/app.js"></script>
<script type="application/javascript" src="js/init-app.js"></script>
<script type="application/javascript" src="popup/popup.min.js"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="js/index_uib_w_13_popup.js"></script>
<script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
<script type="application/javascript" src="xdk/ad/ionic_subpage.js"></script>

<body ng-app="myApp">
<div class="upage" id="mainpage">
  <div class="upage-outer content-area vertical-col left fixed-header-footer">
    <div id="page_28_32" class="upage-content vertical-col left ">
      <template class="uib-ionic-popup widget uib_w_13 d-margins" data-uib="ionic/popup" data-ver="0"></template>

    </div>
    <ion-header-bar class="bar inner-element uib_w_1 bar-balanced bar-header" data-uib="ionic/header" data-ver="0" align-title="center">
      <div class="buttons widget-container content-area horiz-area wrapping-col">
        <button class="button widget uib_w_2 ion d-margins button-clear ion-android-more icon-right" data-uib="ionic/button" data-ver="0"></button>
<div class="upage" id="mainpage">
  <div class="upage-outer content-area vertical-col left fixed-header-footer">
    <div id="page_28_32" class="upage-content vertical-col left ">
      <template class="uib-ionic-popup widget uib_w_13 d-margins" data-uib="ionic/popup" data-ver="0"></template>

    </div>
    <ion-header-bar class="bar inner-element uib_w_1 bar-balanced bar-header" data-uib="ionic/header" data-ver="0" align-title="center">
      <div class="buttons widget-container content-area horiz-area wrapping-col">
        <button class="button widget uib_w_2 ion d-margins button-clear ion-android-more icon-right" data-uib="ionic/button" data-ver="0"></button>
      </div>

<h1 class="title">Medroid</h1>
      <div class="buttons widget-container content-area horiz-area wrapping-col">
        <button class="button widget uib_w_7 ion ion-android-reminder icon-right d-margins" data-uib="ionic/button" data-ver="0" id="notifications"></button>
        <button class="button widget uib_w_6 ion d-margins ion-android-forums icon-right" data-uib="ionic/button" data-ver="0" id="inbox" ng-controller="uib_w_8_popover_controller" ng-click="show($event)"></button>
        <button  ng-app="statusButton" class="button widget uib_w_5 ion d-margins button-large ion-android-data icon-left" data-uib="ionic/button" data-ver="0" ng-controller="statusCtrl" id="status">{{status}}</button>
      </div>

JavaScript: JavaScript:

angular.module('statusButton',['ionic'])
.controller('statusCtrl', function($scope){ 
$scope.status = "hey";
}
});

Here's the Output 这是输出

Update: I tried several times to get angular controllers to work with no avail, I simply cannot get angular working with this IDE. 更新:我曾尝试过几次让角度控制器无济于事,但我根本无法在此IDE中使用角度控制器。

I figured out the issue, It appears that angular doesn't work when you use the design view with ionic. 我发现了这个问题,当您将设计视图与离子配合使用时,角度似乎不起作用。 I ended up creating a new blank project with app designer disabled and did everything from scratch and it works. 我最终在禁用应用程序设计器的情况下创建了一个新的空白项目,并从头开始进行了所有工作,并且一切正常。 If anyone else is having this issue with app designer let me know. 如果其他人在应用设计器中遇到此问题,请告诉我。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM