3

所以，今天早些时候，我有一个可以将restaurants文档发布和删除到 mongodb 集合的工作表单。一切正常，但后来我决定尝试将表单加载到 div 中，而不是重定向到新页面。当我尝试提交我的餐厅表格时，这样做会产生不同的结果。最初它会调用$scope.add()my restaurantsController，但现在它正在发送GET带有表单数据的请求，/restaurants而不是POSTto /api/restaurants。我正在寻找一些关于我为改变行为所做的事情的见解。虽然当我点击我的餐厅锚标签时它正在加载表单，但它并没有从数据库中加载餐厅。

这是菜单锚的jade和js：

菜单.js

app.controller("menu", ["$scope", "$http", function ($scope, $http) {
    $scope.home = function () {
      $("#content").html("");
    };
    $scope.restaurants = function () {
      $http.get('/restaurants').
        success(function(data, status, headers, config){
          $("#main_content").html(data);
      }).
        error(function(data, status, headers, config){

      });
    };
}]);

导航翡翠

mixin link(name, fn)
  li
    a.btn(ng-click=fn)= name

nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation')
  .container
     .navbar-header
      button.navbar-toggle.collapsed(type='button', data-    toggle='collapse', data-target='#navbar', aria-expanded='false', aria-    controls='navbar')
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.navbar-brand(href='/') Food App
    #navbar.navbar-collapse.collapse
      ul.nav.navbar-nav(ng-controller="menu")
        +link("Home", "home()")
        +link("Restaurants", "restaurants()")

这是表格：

form(name="NewRestaurant" ng-submit="$event.preventDefault();add()")     
    .row
      .form-group
        input.form-control(type="text", name="name" placeholder="Name", ng-model="name" required)
    .row
      .form-group
        input.form-control(type="text", name="address" placeholder="Address", ng-model="address" required)
    .row
      .form-group.col-md-6
        -for(var i = 0; i <= 5; i++){
          input(name="rating" type="radio", value=i, ng-model="rating" required)
        =i
        -}
      .form-group.col-md-6
        button.success(type="submit") Submit

和控制器...

app.controller("restaurants", ["$scope", "$resource", function ($scope, $resource) {
    var Restaurant = $resource('/api/restaurants/:id');

    var clearForm = function () {
      $scope.name = '';
      $scope.address = '';
      $scope.rating = null;
    }
    clearForm();

    var validRestaurant = function () {
      if($scope.name !== '' && $scope.address !== '' && $scope.rating !== null)
        return true;
      else{
        toastr.error("Please fill in all required form fields.");
        return false;
      }
    }

    $scope.query = function(){
      Restaurant.query(function (results) {
        $scope.restaurants = results;
      });
    };

    $scope.add = function () {
      alert("got here!");
      if(validRestaurant()){
        var restaurant = new Restaurant();
        restaurant.name = $scope.name;
        restaurant.address = $scope.address;
        restaurant.rating = $scope.rating;
        alert(restaurant);
        Restaurant.save(restaurant, function (result) {
          $scope.restaurants.push(result);
          toastr.success("Saved " + $scope.name + ".")
          clearForm();
        });
      }
    };

    $scope.update = function (id) {

    };

    $scope.remove = function (id) {
        console.log(id);
        Restaurant.delete({id: id}, function (err) {
            console.log(err);
            $scope.query();
        });
    };
    $scope.query();
}]);

编辑：现在我正在输入这个，我想知道，也许 Angular 无法识别表单并且没有为它创建 $scope 因为它在页面加载后被加载......？

4

0 回答 0