AngularJS

Question

下面是一段连接 Firebase 数据库的代码。

我得到了 numberOfUsers 的值，现在我想在 html 中使用这个变量，就像 {{numberOfUsers}} 一样。

我不确定最好的方法是什么，或者我是否还需要使用控制器？对不起，如果这是一个愚蠢的问题，我还在学习 Javascript 和 Angular。

angular.module('myApp', ['ngRoute', 'firebase'])

  var userList = new Firebase("https://my-app.firebaseio.com/presence/");

  userList.on("value", function(snap) {
    numberOfUsers = snap.numChildren();
    console.log("Users = " + numberOfUsers);
  });

;

http://jsfiddle.net/HB7LU/11820/

任何帮助将不胜感激。

谢谢

Answer 1

使值可用的正式方法是将其放在 $rootScope 中，但最好将其作为服务的一部分公开。

Answer 2

尝试使用常量

http://jsfiddle.net/HB7LU/11818/

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

    myApp.constant('numUsers', 4);

    function MyCtrl($scope,numUsers) {
        $scope.name = 'Superhero';
        $scope.numUsers = numUsers;

        $scope.addUser = function(){
            numUsers++;
            $scope.numUsers = numUsers;
        }
    }

Answer 3

您可以使用常量来实现与 Lucas 所建议的相同的效果。但是，您可以像这样将每个值组合在一起，而不是为每个值创建一个常量服务：

angular.module("myModule")
.constant("CONST", { "KEY1" : "VALUE1", 
    "KEY2" : "VALUE2"});

这样你就可以收集一堆常量并像这样使用它：

CONST.KEY1
CONST.KEY2

编辑：你的问题似乎很不一样。

首先，您应该使用 AngularJS 风格的 Firebase。它被称为 AngularFire. You can find out more about it here。我将回答根据模型更改呈现 UI 的问题。 AngularJS 提倡 MVC 模式。您需要 Service、Controller 和 View（HTML 页）的对象来实现您想要的功能。

在我下面提供的示例中，所有内容都合并到一个文件中 (index.html)，但理想情况下，代码应该分开。

<div ng-app="myapp">
    <div ng-controller="PostCtrl" >
        <ul>
            <li ng-repeat="post in posts"> <!-- $scope.posts of PostCtrl" -->
                <div>
                    <span>{{post}}</span> <!-- {{}} is used to render data -->
                </div>
           </li>
       </ul>
   </div>
    <script>
        //factory is a type of service. Services are used to write business logic or fetch data from the backend. Your Firebase related calls should come here. 
        angular.module("myapp", []).factory("myService", function($http) {
         return { 
          fetchData: function() { 
        return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; //can also be a request to the backend returning data.
          }
         };
        });

         //a controller connects a service to the HTML file. $scope service provided by AngularJS is used to achieve this.
        angular.module("myapp").controller("PostCtrl", ["$scope", "myService", function($scope, myService) {
         //posts variable is used in HTML code to retrieve this data.
         $scope.posts = myService.fetchData();
        }]);
    </script>
</div>

要了解 AngularJS 的基础知识，您可以阅读 codeschool 教程。他们是互动的，从基础开始。

AngularJS - 使整个应用程序都可以访问变量

AngularJS - make variable accessible to whole app

javascript

firebase