Question

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

app 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>

Answer 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) {     

   });

Angularjs与Firebase无法发送数据

1 个答案: