Question

我尝试构建一个应用程序，让您将数据输入到多个字段中，使用AngularJS将数据放入Firebase JSON中，并将数据输出到布局合理的“卡片”中。

最初我可以输入和输出数据，但是当我将它连接到AngularJS和Firebase时，我的浏览器中只有'{{1 + 2}}'而不是'3'。

我正在我的网络服务器上运行此代码，我希望你能帮助我找出问题所在 - 页面几乎是空白的。依赖于Angular的一切都没有出现。

链接到实时页面：

这是我的代码：

的index.html

<html lang="en" ng-app="repertoire">
<head>
    <meta charset="utf-8">
    <title>Repertoire Beta</title>

    <!-- STYLES -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />

    <!-- SCRIPTS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script type="text/javascript" src="assets/js/angular.js"></script>
    <script type="text/javascript" src="assets/js/angular.min.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/venues.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

  <body ng-controller="VenueController as venueCtrl">

    <p class="ANGULAR_TEST">1 + 2 = {{ 1 + 2 }}</p>

    <header class="card">
        <h1>repertoire</h1>
    </header>

    <venue-list></venue-list>

    <venue-form></venue-form>

    <footer id="info" class="card" ng-include="'footer.html'"></footer>

  </body>
</html>

场地list.html

<section class="card" id="venueList">
<h2 class="venue_name">{{venueCtrl.venue.name}}</h2>
<h3 class="venue_location">{{venueCtrl.venue.location}}</h3>
<div class="pricecat">
    <span class="venue_price">{{venueCtrl.venue.price}}</span>
    <span class="venue_category">{{venueCtrl.venue.species}} {{venueCtrl.venue.genre}}</span>
</div>
<p class="venue_description">{{venueCtrl.venue.description}}</p>
<p class="venue_tags">{{venueCtrl.venue.tags}}</p>
</section>

场地form.html

<section class="card" id="venueForm">
<form name="venueForm" ng-controller="VenueController as venueCtrl" ng-submit="venueForm.$valid && venueCtrl.venueForm(info)" novalidate>
    <input ng-model="venueCtrl.venue.name" type='text' class="input" id='nameInput' placeholder='Venue Name' required/>
    <input ng-model="venueCtrl.venue.location" type='text' class="input" id='locationInput' placeholder='Address' required/>
    <select ng-model="venueCtrl.venue.price" type='text' class="input" id='priceInput' ng-options="price for price in [$,$$,$$$,$$$$]">
        <option value="">Price</option>
    </select>
    <input ng-model="venueCtrl.venue.genre" type='text' class="input" id='genreInput' placeholder='Category'/>
    <input ng-model="venueCtrl.venue.species" type='text' class="input" id='speciesInput' placeholder='What kind?'/>
    <textarea ng-model="venueCtrl.venue.description" type='text' class="input" id='descriptionInput' placeholder='Description'></textarea>
    <input ng-model="venueCtrl.venue.tags" type='text' class="input" id='tagsInput' placeholder='Who did you go with?'/>
    <label>Have you already been?</label>
    <input ng-model="venueCtrl.venue.check" type="checkbox" checked />

    <div> venueForm is {{venueForm.$valid}} </div>
    <input type="submit" value="Add Venue"/>
</form>
</section>

app.js

(function() {

var app = angular.module('repertoire', ['repertoire-venues']);

//var app = new Firebase('https://xyz.firebaseio.com/');

app.controller("VenueController", ['$http', function($http){
    var venue = this;
    venue.info = [ ];

    $http.get('venues.json').success(function(data){
        venue.info = data;
    });
}]);

})();

剧目-venues.js

(function() {
var app = angular.module('repertoire-venues', []);

app.directive('venueList', function(){
   return {
       restrict: 'E',
       templateUrl: 'venue-list.html'
   }; 
});

app.directive('venueForm', function(){
   return {
       restrict: 'E',
       templateUrl: 'venue-form.html'
       controller: function(){
           this.venue = {};

           this.venueForm = function(info){
               info.venues.push(this.venue);
               this.venue = {};
            };
       },
       controllerAs: 'venueCtrl'
   }; 
});

})();

非常感谢你＆lt; 3

Answer 1

你在索引页面中包含了venues.js而不是repertoire-venues.js，并且在repertoire-venues.js第14行中有一个逗号丢失

脚本无法加载：将AngularJS与JSON一起使用（Firebase）

1 个答案: