如何在ionic中显示来自Javascript文件的数据？答案

【问题标题】：How to display data from a Javascript file in ionic?如何在ionic中显示来自Javascript文件的数据？
【发布时间】：2017-02-13 23:12:44
【问题描述】：

我是 Javascript 和 Ionic 的新手，我想知道如何在应用程序本身中显示我的用户名。

我与 Firebase 的连接运行良好

这里是js文件的代码：

var userId = '-KcntxrTC1eZjrkyycn4';
return firebase.database().ref('/accounts/' + userId).once('value').then(function(snapshot) {
    var displayName = snapshot.val().name;
    console.log(displayName);
    // ...
});

我的 html 文件由该代码所在的控制器控制。
控制台日志呈现“Sebastien”，因此可以正常工作
当我在我的 html 文档中写 {{displayName}} 时，什么都没有出现。

我错过了什么？

编辑 - 添加代码

这是我的控制器的代码：

.controller('accountController',['$scope', '$firebaseArray', 'CONFIG', '$document', '$state', function($scope, $firebaseArray, CONFIG, $document, $state) {

  var userId = '-KcntxrTC1eZjrkyycn4';
  return firebase.database().ref('/accounts/' + userId).once('value').then(function(snapshot) {
  var displayName = snapshot.val().name;
  $scope.displayName = snapshot.val().name;
  console.log(displayName);
  // ...


  });
}])

这是我的 HTML 文档的代码：

<!-- *profile-name / name profile -->
                <h3 class="profile-name">{{diplayName}}</h3>

问题是我在登录后立即在控制台中显示该名称，但是当我访问由实际控制器控制的页面时，它不会选择它。就像它不明白它必须从 Firebase 获取数据一样。

【问题讨论】：

您必须将要在视图中使用的属性放在您的 $scope 对象上：$scope.displayName = snapshot.val().name;

标签： javascript firebase ionic-framework firebase-realtime-database

【解决方案1】：

无论你想在视图中显示什么，你都需要添加$scope angular service

JavaScript

$scope.data = {
  fName: "Sanjay",
  lName: "Nishad"
}

HTML

<p> {{data.fName}} </p>
<p> {{data.lName}} </p>

在您的情况下：你不需要声明var displayName = snapshot.val().name; 只需添加$scope

$scope.displayName = snapshot.val().name;

或

$scope.displayData = snapshot.val();

【讨论】：

您好，感谢您的宝贵时间，但它仍然无法正常工作，它会在控制台中写入值但仍然没有显示任何内容...
显示什么？您使用的是哪个元素？可能是其他一些 JS 代码或拼写错误清除了该元素
我编辑了我的初始代码，但什么也没有显示，甚至控制台中没有错误，什么也没有。它只是留下一个空格而不是名称。
赋值后试一次$scope.$apply()
非常感谢，确实，它就像一个魅力！

【解决方案2】：

我认为这是因为 Angular 没有读取数据库，因为它发生在其 $digest 周期之外。如果您将代码包装在 $apply 中，它可能会起作用：

firebase.database()
    .ref('/accounts/' + userId)
    .once('value')
    .then(function(snapshot) {
        var displayName = snapshot.val().name;
        console.log(displayName);

        $scope.$apply(function() {
            $scope.displayName = displayName;
        });
    // ...
});

注意：删除return 语句。控制器不应返回任何内容。

【讨论】：