AngularJs：無法切換兩個元素

app.js

(function(){ 

    var app = angular.module('myApp', ['fsCordova']); 

    app.controller('MyController', function($scope, CordovaService) { 

     this.ready = false; 

     CordovaService.ready.then(function() { 

      console.log ("CordovaService.ready received"); 
      this.ready = true; 
     }); 

    }); 

})();

我可以看到控制檯消息CordovaService.ready收到。所以代碼正在工作。

在我的index.html我這（只有有用的部分）。

<body ng-controller="MyController"> 
     <div class="app"> 
      <h1>Apache Cordova</h1> 
      <div id="deviceready" class="blink"> 
       <p class="event listening" ng-hide="ready">Connecting to Device</p> 
       <p class="event received" ng-show="ready">Device is Ready</p> 
      </div> 
     </div> 
     <script type="text/javascript" src="cordova.js"></script> 
    </body>

出於完整性感澈，這是.css文件中的相關部分

.event.listening { 
    background-color:#333333; 
} 

.event.received { 
    background-color:#4B946A; 
} 

.blink { 
    animation:fade 3000ms infinite; 
}

我重複：我可以看到控制檯消息CordovaService.ready收到 。所以JS代碼正在工作。

的問題是：「連接到設備」仍然可見，即使MyController.ready設置爲true

如何調試

來源

2014-07-17 realtebo

並且您看不到'Device is Ready'爲好吧？ – V31

確切地說，我看不到「設備已準備好」 – realtebo

H你有沒有嘗試亞歷山大所建議的？ – V31

您應該使用$scope在控制器和模板之間共享狀態。

app.controller('MyController', ['$scope', 'CordovaService', function($scope, CordovaService) { 

    $scope.ready = false; 
    CordovaService.ready.then(function() { 
     console.log ("CordovaService.ready received"); 
     $scope.ready = true; 
    }); 

}]);

來源

2014-07-17 09:46:18 Vadim

他也可以添加控制器前綴模板MyController.ready –

什麼是'控制器前綴'？ – realtebo

@GenaMoroz控制器的名稱空間不應該用於意圖修改的屬性，只能用作控制器想要公開爲公共API的函數的名稱空間。通常這樣做是爲了增強範圍摘要循環的性能，因爲只監視範圍成員。放置意圖被修改和觀看的值是已知的反模式。 – Vadim

嘗試使用$scope.ready代替this.ready

？

編輯：我的回答很短，這是一個擴展版本：

正如文檔所述：

Scope is the glue between application controller and the view

如果你想公開一個變量並在你的視圖中獲得更新的值，你可以使用$ scope。如果您使用this，則表示僅在控制器內部引用本地作用域，並且視圖無法知道此變量。

來源

2014-07-17 09:45:44

您是否介意更新有關更改的一些細節？爲什麼需要？ – Shubh

你是對的，我已經更新了我的答案;） –

你需要有控制這個樣子的：

(function(){ 

    var app = angular.module('myApp', ['fsCordova']); 

    app.controller('MyController', ['$scope','CordovaService',function($scope, CordovaService) { 

     $scope.ready = false; 

     CordovaService.ready.then(function() { 

      console.log ("CordovaService.ready received"); 
      $scope.ready = true; 
     }); 

    }]); 

})();

爲什麼this.ready沒有內部CordovaService.ready.then工作的實際原因（函數（）{}）函數是'this'將採用CordovaService.ready.then（函數（）函數）的當前函數的作用域，而不是作用域未更新的作用域。

來源

2014-07-17 10:24:59 V31

你的代碼會導致錯誤，因爲你告訴注入器你想注入'CordovaService'作爲第一個參數（$ scope），並且第二個參數（CordovaService）將會被undefined – Vadim

糾正！謝謝！ – V31

AngularJs：無法切換兩個元素

回答

相關問題