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：无法切换两个元素

回答

相关问题