2015-12-03 56 views
0

我使用cordova開發Android應用程序並嘗試使用angularjs。當我嘗試瀏覽器工作的應用程序,但當我嘗試在Android模擬器上的應用程序時,我只得到連接到設備Angularjs不與科爾多瓦合作

var app = { 
    // Application Constructor 
    initialize: function() { 
     this.bindEvents(); 
    }, 
    // Bind Event Listeners 
    // 
    // Bind any events that are required on startup. Common events are: 
    // 'load', 'deviceready', 'offline', and 'online'. 
    bindEvents: function() { 
     document.addEventListener('deviceready', this.onDeviceReady,false); 
    }, 
    // deviceready Event Handler 
    // 
    // The scope of 'this' is the event. In order to call the 'receivedEvent' 
    // function, we must explicitly call 'app.receivedEvent(...);' 
    onDeviceReady: function() { 
     app.receivedEvent('deviceready'); 
    }, 
    // Update DOM on a Received Event 
    receivedEvent: function(id) { 
     angular.bootstrap(document, ['HelloWorld']); 
     var parentElement = document.getElementById(id); 
     var listeningElement = parentElement.querySelector('.listening'); 
     var receivedElement = parentElement.querySelector('.received'); 

     listeningElement.setAttribute('style', 'display:none;'); 
     receivedElement.setAttribute('style', 'display:block;'); 

     console.log('Received Event: ' + id); 
    } 
}; 
app.initialize(); 

<html> 
<head> 
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 
    <meta name="format-detection" content="telephone=no"> 
    <meta name="msapplication-tap-highlight" content="no"> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 
    <title>Hello World</title> 
</head> 
<body> 
    <div class="app" ng-controller="HomeCtrl"> 
     <h1 ng-bind="name">Apache Cordova</h1> 
     <div id="deviceready" class="blink"> 
      <p class="event listening">Connecting to Device</p> 
      <p class="event received">Device is Ready</p> 
     </div> 
     <div style="margin-top:10px;"> 
      <button ng-click="process()">Click Here</button> 
     </div> 
    </div> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="js/angular.min.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript"> 
    /** 
    * Module 
    * 
    * Description 
    */ 
    angular.module('HelloWorld', []).controller('HomeCtrl', ['$scope', function($scope){ 
     $scope.name = "Welcome TO Cordova"; 

     $scope.process = function(){ 
      $scope.name = "Welcome Mr. Ddeveloper"; 
     } 
    }]) 
    </script> 
</body> 

+0

做您嘗試使用angularjs創建模塊,並與NG-應用程序結合呢? 我可以看到你的代碼與科爾多瓦事件混亂。你爲什麼不在外面使用角? – Gianmarco

+0

你的意思是說,初始化角度範圍以外的deviceready事件 – vimal

+0

是的,只是創建一個正常的angularjs應用程序,然後做你必須與科爾多瓦...我試過一次,它應該工作無瑕 – Gianmarco

回答

1

錯誤在執行上面的代碼片段:

  1. 拒絕,因爲它違反了以下內容安全策略指令執行內嵌腳本:「默認-SRC‘自我’的數據:差距:https://ssl.gstatic.com'unsafe-eval'「。 「內聯不安全」關鍵字,散列('sha256 -...')或一個隨機數('nonce -...')是啓用內聯執行所必需的。還要注意的是 '腳本src' 中是沒有明確設定,所以 '默認-src' 中被用作後備

  2. 未捕獲的錯誤:[$注射器:modulerr]

請嘗試以下方法:

<html> 
    <head> 
     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 
     <meta name="format-detection" content="telephone=no"> 
     <meta name="msapplication-tap-highlight" content="no"> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
     <link rel="stylesheet" type="text/css" href="css/index.css"> 
     <title>Hello World</title> 

    </head> 
    <body> 
    <div class="app" ng-controller="homeCtrl"> 
     <h1 ng-bind="name">Apache Cordova</h1> 
     <div id="deviceready" class="blink"> 
      <p class="event listening">Connecting to Device</p> 
      <p class="event received">Device is Ready</p> 
     </div> 
     <div style="margin-top:10px;"> 
      <button ng-click="process()">Click Here</button> 
     </div> 
    </div> 
     <script type="text/javascript" src="cordova.js"></script> 
     <script type="text/javascript" src="js/angular.min.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript" src="js/homeController.js"></script> 

</body> 
</html> 

在homeController.js

angular.module('HelloWorld', []).controller('homeCtrl', ['$scope', function($scope){ 
     $scope.name = "Welcome TO Cordova"; 

     $scope.process = function(){ 
      $scope.name = "Welcome Mr. Ddeveloper"; 
     } 
    }])