MEAN堆栈编辑帖子

时间:2016-10-19 20:48:10

标签: angularjs typescript mean-stack

所以我正在开发我的第一个MEAN堆栈应用程序,我正在使用类型脚本。

我的帖子工作得很好,但我的编辑帖子不起作用。由于这是我的第一个应用程序,我不太清楚为什么。该错误表明我的帖子的参数未定义。我希望你们中的一个可爱的人可以帮助我。我已经避免长时间寻求帮助,因为我确信这是一个愚蠢的错误。

controllers.ts

http://pastebin.com/bhXT5bLz

app.ts

execute 'chown a directory' do
  command 'chown -R user:group /path/to/directory 2>&-'
end

route.ts:

state('jobPost', {
              url: '/jobPost',
              templateUrl: "/templates/jobPost.html",
              controller: MyApp.Controllers.jobPostController,
              controllerAs: 'jobPost'
          })
          .state('editjobPost', {
              url: '/editjobPost',
              templateUrl: "/templates/jobPost.html",
              controller: MyApp.Controllers.jobPostController,
              controllerAs: 'jobPost'
          })

jobPost.html:

router.get('/jobPostData', function (req, res) {
  console.log('getting jobPost data');
  JobPost.find({}, function(err, jobposts) {
    res.json(jobposts);
  });
});

router.put('/jobPost', function (req, res, next) {
  console.log('editing jobPost');
  let jobPost = new JobPost({
    jobTitle: req.body.jobTitle,
    jobLocation: req.body.jobLocation,
    jobDescription: req.body.jobDescription,
    created_at: req.body.created_at
  });
  console.log(jobPost);
  jobPost.save(function(err, jobPost) {
    if (err) return next(err);
    console.log('edited post');
    res.send(jobPost);
  });
});

jobForm.ts:

<link rel="stylesheet" href="/css/jobPost.css" media="screen" title="no title" charset="utf-8">
<br><br><br><br><br><br><br>

<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div ng-show="jobPost.newForm" class="col-md-12" id="background">
        <h1 class="headers">Post a Job</h1>
        <form ng-submit="jobPost.newJobPost()" class="new_job_form" name="new_job_form">
          <input ng-model="jobPost.jobPost.title" id="jobTitle" type="text" name="jobTitle" placeholder="job title"> <br><br>
          <input ng-model="jobPost.jobPost.location" id="jobLocation" type="text" name="jobLocation" placeholder="job location"> <br><br>
          <textarea ng-model="jobPost.jobPost.description" rows="8" cols="50"class="input-block-level" id="jobDescription" name="jobDescription" placeholder="Enter Description" ></textarea><br>
          <input class="submit-btn" type="submit" name="submit" value="Submit">
        </form>
        <!-- <h2>{{jobPost.message}}</h2> -->
      </div>

        <div ng-show="jobPost.editForm" class="col-md-12" id="background">
          <h1 class="headers">Edit a Job</h1>
          <form ng-submit="jobPost.editJobPost()" class="edit_job_form" name="edit_job_form">
            <input ng-model="jobPost.jobPost.title" type="text" name="jobTitle" value="{{editJobPost.editTitle}}"> <br><br>
            <input ng-model="jobPost.jobPost.location" type="text" name="jobLocation" value="{{editJobPost.editLocation}}"> <br><br>
            <textarea ng-model="jobPost.jobPost.description" rows="8" cols="50"class="input-block-level"  name="jobDescription" value="{{editJobPost.editDescription}}" ></textarea><br>
            <input class="submit-btn" type="submit" name="submit" value="Submit">
          </form>
        </div>
      </div

    </div>
  </div>
</div>
<br><br>

<div class="container-fluid">
  <div class="container">
    <h1 class="headers">Your Jobs</h1>
    <div class="row" ng-repeat="job in jobPost.jobPosts.slice(((jobPost.currentPage-1)*jobPost.itemsPerPage),((jobPost.currentPage)*jobPost.itemsPerPage)) | orderBy : 'created_at' ">
      <h1></h1>
      <div class="col-md-12 jobPosting panel-title">
        <h2>{{job.jobTitle}}<a class="pull-right" ui-sref="editjobPost"><span ng-click="jobPost.editJobPost()" class="glyphicon glyphicon-cog"></a></h2>
        <h3>{{job.jobLocation}}</h3>
        <h3>{{job.jobDescription}}</h3>

      </div>
    </div>
    <!-- <pagination total-items="jobPost.totalItems" ng-model="jobPost.currentPage" ng-change="jobPost.pageChanged()" class="pagination-sm" items-per-page="jobPost.itemsPerPage"></pagination> -->
    <ul uib-pagination total-items="jobPost.totalItems" items-per-page="jobPost.itemsPerPage" ng-model="jobPost.currentPage" ng-change="jobPost.pageChanged()"></ul>
    <!-- <ul uib-pagination total-items="totalItems" ng-model="JobPost" ng-change="pageChanged()"></ul> -->
    <!-- <h4>Default</h4>
    <h5>totalItems: {{jobPost.totalItems}}</h5>
    <ul uib-pagination total-items="jobPost.totalItems" ng-model="jobPost.currentPage" ng-change="jobPost.pageChanged()"></ul> -->
    <!-- <ul uib-pagination boundary-links="true" total-items="jobPost.totalItems" ng-model="jobPost.currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></ul>
    <ul uib-pagination direction-links="false" boundary-links="true" total-items="jobPost.totalItems" ng-model="jobPost.currentPage"></ul>
    <ul uib-pagination direction-links="false" total-items="jobPost.totalItems" ng-model="jobPost.currentPage" num-pages="smallnumPages"></ul>
    <pre>The selected page no: {{jobPost.currentPage}}</pre>
    <button type="button" class="btn btn-info" ng-click="jobPost.setPage(3)">Set current page to: 3</button> -->

    <hr />
  </div>
</div>

<script src="/js/jobForm.js" charset="utf-8"></script>

****编辑以反映回答堆栈溢出核对表 我已经尝试弄乱了JobPost.html中editJobPost部分的ui-sref和ng-click,这可能是路由错误。

然后我将controller.js中的editJobPost方法从JobPost变量更改为JobPosts变量。现在它运行并编译(之前没有)它会在控制台中抛出它:

$(document).ready(function() {
  $('.new_job_form').on('submit', function(e){
    e.preventDefault();
    var jobTitle = $('#jobTitle').val();
    var jobLocation = $('#jobLocation').val();
    var jobDescription = $('#jobDescription').val();

    $('#jobTitle').val('');
    $('#jobLocation').val('');
    $('#jobDescription').val('');

    var data = {
            jobTitle: jobTitle,
            jobLocation: jobLocation,
            jobDescription: jobDescription,
            };
    console.log(data);
    $.ajax({
          url: '/jobPost',
          dataType: "json",
          method: "POST",
          data: data,
          success: function(data, textStatus, jqXHR){
          console.log("Successfully saved to database",data);
          // var resultString = "<h4>"+data.jobTitle+"</h4><h4>"+data.jobLocation+"</h4><h4>"+data.jobDescription+"</h4>";
          // $('.postResult').html(resultString);
          },
          error: function(XMLHttpRequest, textStatus, errorThrown){
              alert("Status: " + textStatus); alert("Error: " + errorThrown);
          }
       });
  });
  angular.module('MyApp').controller('jobPostController', function ($scope, $log) {
    $scope.totalItems = 64;
    $scope.currentPage = 1;

    $scope.setPage = function (pageNo) {
      $scope.currentPage = pageNo;
    };

    $scope.pageChanged = function() {
      $log.log('Page changed to: ' + $scope.currentPage);
    };

    $scope.maxSize = 5;
    $scope.bigTotalItems = 175;
    $scope.bigCurrentPage = 1;
  });

});

我知道这意味着我声明的变量是未定义的,我只是不知道从哪里开始。有什么不对,为什么。

0 个答案:

没有答案