Question

我正在尝试使用angularjs将数据添加到firebase数据库中，但是当单击添加按钮时没有任何操作，并且没有调用函数，并且控制台中没有出现错误。我的代码中的问题在哪里？

addPost.html

<body ng-controller="AddPostCtrl">

<div class="blog-masthead">
    <div class="container">
        <nav class="blog-nav">
            <a class="blog-nav-item " href="#">Home</a>
            <a class="blog-nav-item active" href="addPost.html">Add Post</a>

        </nav>
    </div> </div>

<div class="container">


    <form class="form-horizontal" ng-submit="AddPost()">
        <fieldset>

            <!-- Form Name -->
            <legend>Create Post</legend>

            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="txtTitle">Post</label>
                <div class="col-md-4">
                    <input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="Post name" class="form-control input-md">

                </div>
            </div>

            <!-- Textarea -->
            <div class="form-group">
                <label class="col-md-4 control-label" for="txtPost">Description</label>
                <div class="col-md-4">
                    <!--<textarea class="form-control" id="txtPost" name="txtPost"></textarea>-->
                    <textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
                </div>
            </div>

            <!-- Button -->
            <div class="form-group">
                <label class="col-md-4 control-label" for="singlebutton"></label>
                <div class="col-md-4">
                    <!--<input id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit" value="Add" />-->
                    <input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Add" />

                </div>
            </div>

        </fieldset>
    </form>


</div> 

</body>

addPost.js

'use strict';

angular.module('myApp.addPost', ['ngRoute'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/addPost', {
            templateUrl: 'addPost/addPost.html',
            controller: 'AddPostCtrl'
        });
    }]).controller('AddPostCtrl', ['$scope','$firebase',function($scope,$firebase) {
        console.log("This was called.");
        $scope.AddPost = function(){
            var title = $scope.article.title;
            var post = $scope.article.post;
            var firebaseObj = new Firebase("https://xxxxxx.firebaseio.com/");
            var fb = $firebase(firebaseObj);
            fb.$push({ title: title,post: post}).then(function(ref) {
                console.log(ref);
            }, function(error) {
                console.log("Error:", error);
            });

        }
    }]);

index.html中的

脚本

 <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="addPost/addPost.js"></script>
  <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
  <script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>

Answer 1

你的问题是Async Loading ...你在script.js之后加载了firebase ....你想这样加载它：

      <script src="bower_components/angular/angular.js"></script>
      <script src="bower_components/angular-route/angular-route.js"></script>
      <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
      <script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
      <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
      <script src="app.js"></script>
      <script src="addPost/addPost.js"></script>

所以现在它实际上知道AngularFire和Firebase提供的方法和变量......你导入的所有内容基本上都是一个Js文件..它首先通过角度然后是Firebase，然后是Angularfire（需要在Firebase和AngularFire之后导入）所以它从它们收到变量和方法），然后完成你的脚本将使用所有可用的库。希望这是有道理的。

使用angularjs将数据添加到firebase中

1 个答案: