带有 Firebase 的 Angularjs 无法发送数据答案

【问题标题】：Angularjs with Firebase not able to send data带有 Firebase 的 Angularjs 无法发送数据
【发布时间】：2017-10-09 22:21:51
【问题描述】：

我正在使用 angularjs 和 firebase 创建一个简单的联系人列表，我面临的问题是无法将数据发送到 firebase，我收到此错误“$add is undefined”或者如果我尝试使用 push.set( ) 同样的问题。

应用程序js：

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'firebase',
  'myApp.contacts'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
    $locationProvider.hashPrefix('!');
    $routeProvider.otherwise({redirectTo: '/contacts'});
}]);

联系lis JS：

  'use strict';
    angular.module('myApp.contacts', ['ngRoute'])
    .config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/contacts', {
        templateUrl: 'contacts/contacts.html',
        controller: 'ContactsCtrl'
      });
    }])

    .controller('ContactsCtrl', function($scope, $firebaseObject) {
        console.log('contacts controller loaded !! ');
        $scope.addContact = function(){
            console.log('adding contact');
            var firebaseRef = firebase.database().ref();
// 1.           $scope.contacts.$add({
// 2.           $scope.contacts.push.set({
                name : $scope.name,
                email:$scope.email,
                phone:$scope.phone
            }).then(function(firebaseRef){
                var id = firebaseRef.key();
                console.log('Added Content' + id);
                $scope.name = '';
                $scope.email = '';
                $scope.phone = '';
            });
        }
    });

联系人列表html：

<div class="row" ng-controller="ContactsCtrl">
    <div class="col-md-5">
        <h3>Add Contact</h3>
        <form ng-submit="addContact()">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" ng-model="name" placeholder="Name">
          </div>
          <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" ng-model="email" placeholder="Email">
          </div>

          <div class="form-group">
            <label>Phone </label>
            <input type="text" class="form-control" ng-model="phone" placeholder="Phone Number">
          </div>          <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
    <div class="col-md-7">

    </div>
</div>

索引页面html：

一个简单的联系人列表角度演示

  <link rel="stylesheet" href="app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="row">
        <div class="col-md-12">
            <div ng-view></div>
        </div>
      </div>

    </div><!-- /.container -->



  <script src="bower_components/jquery/dist/jquery.js"></script>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>

  <!--script src="bower_components/firebase/firebase.js"></script-->
  <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
  <script>
     var config = {
        apiKey: "AIzaSyBGmZUd120C1zVBNvZBhkJsJb8n4syzeuc",
        authDomain: "angular-1-contact-list.firebaseapp.com",
        databaseURL: "https://angular-1-contact-list.firebaseio.com",
        projectId: "angular-1-contact-list",
        storageBucket: "angular-1-contact-list.appspot.com",
        messagingSenderId: "839676343851"
        };
    firebase.initializeApp(config);
  </script>

  <script src="bower_components/angularfire/dist/angularfire.js"></script>

  <script src="app.js"></script>
  <script src="contacts/contacts.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

【问题讨论】：

你在哪里使用了这个 $add？没有找到那个变量。
@geminiousgoel：抱歉，我尝试了两件事。 1. 添加 & 2. 推送 $scope.contacts.$add({
粘贴更新的代码，我真的想知道为什么我没有看到这个:)
@geminiousgoel：请立即检查！
$add 是 JQuery 的一部分而不是 angularJs

标签： javascript jquery angularjs firebase

【解决方案1】：

你不应该这样做$scope.contacts.$add({

最初你应该通过，

   var contactObject = $firebaseArray(firebaseRef);
   var newContact = {name : $scope.name,
                email:$scope.email,
                phone:$scope.phone};
   contactObject.$add(newContact).then(function(ref) {     

   });

【讨论】：

错误：ReferenceError：$firebaseArray 未定义
@yoo 你应该注入你的控制器 controller('ContactsCtrl', function($scope, $firebaseArray ) {
@yoo 检查这个stackoverflow.com/questions/39382457/…
将其传递给控制器后，出现以下错误：permission_denied at /: Client does not have permission to access the desired data.
@yoo 我猜你的 id 有问题