Question

我是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获取数据。

Answer 1

无论您想在视图中显示什么，都需要添加$scope角度服务

<强>的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();

Answer 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语句。控制器不应该返回任何东西。

如何在离子中显示Javascript文件中的数据？

2 个答案: