带有 Firebase 的 Angularjs 无法发送数据

反应开发人员

我正在使用 angularjs 和 firebase 创建一个简单的联系人列表,我面临的问题是无法将数据发送到 firebase,我收到此错误“$add 未定义”或者如果我尝试使用 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'});
}]);

联系 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>
萨吉塔兰

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

最初,您应该通过以下方式获取实体,

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

   });

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

通过AngularJS发送带有多个数据的HTTP Post

AngularJS AngularFire Firebase 无法迭代 firebase 数据

首次发送后,带有Firebase数据库的Swift 3照片共享扩展名无法正常工作

带有$ resource的AngularJS工厂无法发布数据

带有Firebase的ios发送通知

带有Firebase的Angular无法访问数据

带有AngularJS的Spring MVC获取数据

带有JSON数据的AngularJS多维数组

带有来自angularjs的json数据的表

带有Firebase的Cordova无法正常工作

AngularJS:无法发送带有适当的CORS标头的POST请求

如何在带有多个参数的angularjs中发送POST?

带有服务器发送事件的AngularJS

带有 browsersync post 方法的 Angularjs 作为选项发送

发送带有附件的邮件 - angularJS + Java Spring

如何在 AngularJS 中发送带有多个参数的 POST

使用APNS发送带有图像的Firebase推送通知

Firebase pyfcm发送带有图像的推送通知

如何发送带有ä,ö,ü等特殊字符的Firebase Cloud Messaging Notification?

无法以角形发送带有承载令牌的表单数据

带有Firebase的Axios在放入数据时不会返回数据

使用带有 webpack 的 angularjs 时无法加载 html 文件

AngularJS单击带有数据切换

带有SignalR数据的angularJS如何对表行进行分组

在带有承诺Angularjs的控制器之间传递数据

带有Firebase的Android Studio无法正常工作

无法通过DEBUG构建禁用带有Firebase的Fabric的Crashlytics

无法使用带有Firebase的Flutter从Facebook注销

Firebase数据库子创建问题(带有模型)