Javascript 使用模态jhipster编辑对象

Javascript 使用模态jhipster编辑对象,javascript,angularjs,twitter-bootstrap,angularjs-routing,Javascript,Angularjs,Twitter Bootstrap,Angularjs Routing,我使用JHipster创建了我的项目,最近它非常顺利。但是,我在main.html上编辑对象时遇到了一个问题。当我在路由器指向的posts.html页面上时,我能够成功地编辑帖子,但是我无法使用main.html上完全相同的代码来编辑帖子。我可以从主页上的postController调用该信息,并且它可以充分显示。但是,我无法使我的数据显示在模式弹出窗口中。我知道控制器正在接收信息,因为我的console.log($scope.post)返回我要编辑的对象。但是,该信息不会传输到我的modal。

我使用JHipster创建了我的项目,最近它非常顺利。但是,我在main.html上编辑对象时遇到了一个问题。当我在路由器指向的posts.html页面上时,我能够成功地编辑帖子,但是我无法使用main.html上完全相同的代码来编辑帖子。我可以从主页上的postController调用该信息,并且它可以充分显示。但是,我无法使我的数据显示在模式弹出窗口中。我知道控制器正在接收信息,因为我的console.log($scope.post)返回我要编辑的对象。但是,该信息不会传输到我的modal。谢谢你的帮助

调用编辑的按钮:

//inside postController and an ng-repeat of posts calling update function
<button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
    <span class="glyphicon glyphicon-pencil"></span> Edit
</button>

我知道它成功地调用了这个get函数,但是$scope.post中的数据没有被使用。

事实证明,为了使模式工作,它必须与打印按钮的文本位于同一个控制器div中。我很确定这是因为如果div不同,控制器上的作用域也不同。另外,测试时不要使用同名的第二个模式,因为它将不可避免地失败,因为在使用哪一个模式时会混淆功能

<div id="toBeUpdated" ng-controller="postController">
   <div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
      <div class="modal-dialog">
         <div class="modal-content">
            <form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="createMob()">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">&times;</button>
                  <h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
               </div>
               <div class="modal-body">
                  <div class="form-group">
                     <label>ID</label>
                     <input type="text" class="form-control" name="id" ng-model="post.id" readonly>
                  </div>
                  <div class="form-group">
                     <label>Title</label>
                     <input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
                  </div>
                  <div class="form-group">
                     <label>Author</label>
                     <input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
                  </div>
                  <div class="form-group">
                     <label>Text</label>
                     <textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
                  </div>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
                  <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                  </button>
                  <button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
                  <span class="glyphicon glyphicon-save"></span> Save
                  </button>
               </div>
            </form>
         </div>
      </div>
   </div>
   <li class="animate-repeat" ng-repeat="post in posts.slice().reverse() | checkboxAndFilter:search.$:search.author:search.name:search.id:search.text | limitTo: noPostsOnPage">
      <div class="well ng-scope">
         <div name="desktopPost" class="h4">
            <input type="checkbox" name="checkered"> &emsp;{{post.name}}&emsp;&emsp; <span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
            <a class="pull-right" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
         </div>
         <div style="display: none" name="mobilePost" class="h4">
            <div ng-click="postNameAlert(post.name);">
               <div name="ellipse" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;">{{post.name}}</div>
            </div>
            <input type="checkbox" name="checkered"> &emsp; 
            <span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
            &emsp;&emsp; 
            <a class="pull-right" style="padding-top:7px" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
         </div>
         <p>
         <div ng-bind-html="trustHtml(post.text)" hashtagify term-click="tagTermClick($event)" user-click="tagUserClick($event)"></div>
         </p>
         <br> {{post.author}} on {{post.date_Written}}
         <br>
         <div name="desktopSide">
            <button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
            <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
            <button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
            <span class="glyphicon glyphicon-remove-circle"></span> Delete
            </button>
         </div>
         <div style="display:none;" name="mobileSide">
            <button class="btn btn-primary btn-xs" type="submit" ng-click="updateMob(post.id)" class="btn">
            <span class="glyphicon glyphicon-pencil"></span> Edit
            </button>
            <button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
            <span class="glyphicon glyphicon-remove-circle"></span> Delete
            </button>
         </div>
         <div class="animate-repeat" ng-repeat="summarized in filterID(post.id)">
            <div class="animate-repeat" ng-repeat="new_post in getPost(summarized.child)">
               <button class="pull-right btn btn-default btn-xs" ng-click="reversePostState(new_post.id, new_post.name, new_post.author)">
               <span id="{{new_post.author}}" class="glyphicon glyphicon-plus"></span>
               </button>
               <div class="well ng-scope">
                  <h4>
                     {{new_post.name}}
                     <div id="{{new_post.name}}" style="display:inline;"> - {{new_post.author}}</div>
                     &emsp;&emsp; <span ng-if="new_post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
                     <a class="pull-right" ng-click="changeElemOnClick('id_search');changeid(new_post.id);">{{new_post.id}}</a>
                  </h4>
                  <div id="{{new_post.id}}" style="display:none;">
                     {{new_post.text}}
                     <br> {{new_post.author}} 
                     on {{new_post.date_Written}}
                     <br>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </li>
   <center ng-if="checkForPosts()">
      <button class="btn btn-default" ng-click="incrementLimit()">
      <span class="glyphicon glyphicon-arrow-down"></span>Show More Posts
      </button>
   </center>
</div>

&时代;
创建或编辑帖子
身份证件
标题
作者
正文
取消
拯救
  • &emsp;{{post.name}}&emsp&emsp; {{post.id} {{post.name} &emsp; &emsp&emsp; {{post.id}


    {{post.author}}{{post.date_writed}}}
    编辑 删除 编辑 删除 {{new_post.name} -{{new_post.author}} &emsp&emsp; {{new_post.id} {{new_post.text}
    {{new_post.author}} 在{{新的发布日期}
  • 显示更多帖子
    仍然存在此问题。。。
    $scope.update = function (id) {
            $scope.post = Post.get({id: id});
            $('#savePostModal').modal('show');
        };
    
    <div id="toBeUpdated" ng-controller="postController">
       <div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
          <div class="modal-dialog">
             <div class="modal-content">
                <form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="createMob()">
                   <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">&times;</button>
                      <h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
                   </div>
                   <div class="modal-body">
                      <div class="form-group">
                         <label>ID</label>
                         <input type="text" class="form-control" name="id" ng-model="post.id" readonly>
                      </div>
                      <div class="form-group">
                         <label>Title</label>
                         <input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
                      </div>
                      <div class="form-group">
                         <label>Author</label>
                         <input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
                      </div>
                      <div class="form-group">
                         <label>Text</label>
                         <textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
                      </div>
                   </div>
                   <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
                      <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                      </button>
                      <button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">
                      <span class="glyphicon glyphicon-save"></span> Save
                      </button>
                   </div>
                </form>
             </div>
          </div>
       </div>
       <li class="animate-repeat" ng-repeat="post in posts.slice().reverse() | checkboxAndFilter:search.$:search.author:search.name:search.id:search.text | limitTo: noPostsOnPage">
          <div class="well ng-scope">
             <div name="desktopPost" class="h4">
                <input type="checkbox" name="checkered"> &emsp;{{post.name}}&emsp;&emsp; <span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
                <a class="pull-right" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
             </div>
             <div style="display: none" name="mobilePost" class="h4">
                <div ng-click="postNameAlert(post.name);">
                   <div name="ellipse" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;">{{post.name}}</div>
                </div>
                <input type="checkbox" name="checkered"> &emsp; 
                <span ng-if="post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
                &emsp;&emsp; 
                <a class="pull-right" style="padding-top:7px" ng-click="changeid(post.id);alignSearch();">{{post.id}}</a>
             </div>
             <p>
             <div ng-bind-html="trustHtml(post.text)" hashtagify term-click="tagTermClick($event)" user-click="tagUserClick($event)"></div>
             </p>
             <br> {{post.author}} on {{post.date_Written}}
             <br>
             <div name="desktopSide">
                <button class="btn btn-primary btn-xs" type="submit" ng-click="update(post.id)" class="btn">
                <span class="glyphicon glyphicon-pencil"></span> Edit
                </button>
                <button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove-circle"></span> Delete
                </button>
             </div>
             <div style="display:none;" name="mobileSide">
                <button class="btn btn-primary btn-xs" type="submit" ng-click="updateMob(post.id)" class="btn">
                <span class="glyphicon glyphicon-pencil"></span> Edit
                </button>
                <button class="btn btn-danger btn-xs" type="submit" ng-click="delete(post.id);deleteSummary(post.id);" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove-circle"></span> Delete
                </button>
             </div>
             <div class="animate-repeat" ng-repeat="summarized in filterID(post.id)">
                <div class="animate-repeat" ng-repeat="new_post in getPost(summarized.child)">
                   <button class="pull-right btn btn-default btn-xs" ng-click="reversePostState(new_post.id, new_post.name, new_post.author)">
                   <span id="{{new_post.author}}" class="glyphicon glyphicon-plus"></span>
                   </button>
                   <div class="well ng-scope">
                      <h4>
                         {{new_post.name}}
                         <div id="{{new_post.name}}" style="display:inline;"> - {{new_post.author}}</div>
                         &emsp;&emsp; <span ng-if="new_post.summary==1" class="animate-if"><button class="btn btn-xs disabled"><span class="glyphicon glyphicon-star-empty"></span></button></span>
                         <a class="pull-right" ng-click="changeElemOnClick('id_search');changeid(new_post.id);">{{new_post.id}}</a>
                      </h4>
                      <div id="{{new_post.id}}" style="display:none;">
                         {{new_post.text}}
                         <br> {{new_post.author}} 
                         on {{new_post.date_Written}}
                         <br>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </li>
       <center ng-if="checkForPosts()">
          <button class="btn btn-default" ng-click="incrementLimit()">
          <span class="glyphicon glyphicon-arrow-down"></span>Show More Posts
          </button>
       </center>
    </div>