Question

我的代码有问题，这段代码是关于将一个模态附加到具有特定ID的元素。所以，当点击按钮时，这个模态弹出窗口将显示内部div元素id =“forModal”（具有此id的div元素在view.html内），我的应用程序使用具有基本html（index.html）的angularjs，一个模板用于route（view.html），modal（modal.html）的一个模板。

的index.html

<html>
 <head>
  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!--Ui Route-->
  <script src="lib/ionic/js/angular-ui/angular-ui-router.min.js"> </script>

  <!--UI Bootstrap-->
  <script src="lib/ionic/js/angular-ui/ui-bootstrap-2.5.0.min.js"></script>

  <!--UI Bootstrap TPLS-->
  <script src="lib/ionic/js/angular-ui/ui-bootstrap-2.5.0-tpls.min.js"></script>

  <!--ngCoockies-->
  <script src="js/angular-cookies.js"></script>

  <!-- my app's js -->
  <script src="js/app.js"></script>

  <!--controller js-->
  <script src="js/controller.js"></script>

 </head>
 <body ng-app="starter">
   <ui-view></ui-view>
 </body>
</html>

app.js

var moduleapp = angular.module('starter',  ['ionic','ui.router','ngCookies','ui.bootstrap']);

moduleapp.config(function($stateProvider,$urlRouterProvider){
  $stateProvider.state("dashboard",{
    url:"/dashboard",
    templateUrl:"templates/dashboard.html",
    controller : "dashboardCtrl"
  })

 $stateProvider.state("dashboard.view",{
    url : "/view",
    templateUrl : "templates/view.html",
    controller: "viewDataCtrl"
  })
 $urlRouterProvider.otherwise("/dashboard.view")
 })

controller.js

moduleapp.controller('dashboardCtrl',[function(){
 //some code 
}])

moduleapp.controller('viewDataCtrl',['$document','$uibModal','$scope','$http','$cookies',function($document,$uibModal,$scope,$http,$cookies){

// reserve variable,declare it as object
$scope.dataColumn = {};
$scope.dataData = {};

// reserve variable for user authetication level
$scope.userLevel= $cookies.get('userLevel');

//function for finding available column
function caricolumn(){
 $http.get('link for search column.php').success(function(hasil){
   $scope.dataColumn = hasil;
 });
}

//executing function when controller running
caricolumn();

//function for get data,return result to $scope.dataData as object
function caridata(){
  $http.get('link for search data.php').success(function(hasil){
   $scope.dataData = hasil;
 })
}

//execute function when controller running
caridata();
//function for edit
$scope.edit = function(x){
 var modalInstance = $uibModal.open({
  templateUrl:'templates/modal.html',
  controller:'viewDataCtrl',
  //THIS IS THE PROBLEM ,appendTO doesnt work,still inject modal popup to body element
  appendTo : angular.element(document.querySelector('#viewElement'))
 });
}
//function for delete data
 $scope.delete = function(x){
 $http.post('link for deletedata.php',x).success(function(hasil){
   alert(hasil);
   //if output(php echo) same as string ,this condition considered as success
   if(hasil == "Delete Success"){
     caridata();
   }
  })
 }
}]);

modal.html

  <div class="modal-header">
   <h3>Hayy</h3>
  </div>
 <div class="modal-body">
   <p>this is Body</p>
 </div>
 <div class="modal-footer">
   this is footer
 </div>

dashboard.html

 <ion-side-menus enable-menu-with-back-views="false">
   <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
     <ion-nav-back-button>
     </ion-nav-back-button>

     <ion-nav-buttons side="left">
     <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
     </button>
    </ion-nav-buttons>
  </ion-nav-bar>

  <ui-view>
  <!--This is where view.html injected-->
  </ui-view>
</ion-side-menu-content>

<ion-side-menu side="left">
  <ion-header-bar class="bar-stable">
   <h1 class="title">Menu</h1>
 </ion-header-bar>
 <ion-content>
   <ion-list ><a ui-sref="dashboard.add">
     <ion-item>Tambah Data</ion-item></a>
   </ion-list>
   <ion-list ><a ui-sref="dashboard.view">
    <ion-item>Tampil Data</ion-item></a>
   </ion-list>
  <ion-list >
    <a ng-click="logout()">
     <ion-item>Log Out</ion-item>
    </a>
   </ion-list>
   </ion-content>
  </ion-side-menu>
</ion-side-menus>

view.html

<div id="viewElement" class="container" style="margin-top:50px;">
 <h2>Data-Data</h2>
 <hr/>
 <table class="table table-bordered">
  <thead>
   <tr>
    <th ng-repeat="dc in dataColumn">{{dc.KOLOM}}</th>
    <th ng-if="userLevel == 'LV02' || userLevel == 'LV01'">Edit</th>
    <th ng-if="userLevel == 'LV01'">Delete</th>
   </tr>
  </thead>
  <tbody>
   <tr ng-repeat="dd in dataData" id="dt{{dd.IDROW}}">
    <td ng-repeat="ddd in dd.DATA">{{ddd}}</td>
    <td ng-if="userLevel == 'LV01' || userLevel == 'LV01'"><button type="button" ng-click="edit({{dd.IDROW}})" class="btn btn-warning">Edit</button></td>
    <td ng-if="userLevel == 'LV01'"><button type="button" ng-click="delete({{dd.IDROW}})" class="btn btn-danger">Delete</button></td>
  </tr>
 </tbody>
 </table>
</div>

正如您所看到的，当应用程序运行.route默认将转到“dashboard.view” 仪表板状态是左侧菜单的代码，然后是用于查看数据的dashboard.view状态（从仪表板状态查看子级中的状态）我想要的是当在view.html中点击编辑按钮时（控制器：viewDataCtrl，状态：dashboard.view），模式弹出窗口将出现在id =“forModal”的div元素内（具有此id的div元素在view.html内）但是使用此代码，模态弹出窗口始终显示在body标签元素内，而不是div元素内的id =“forModal”。我该如何处理这种情况？感谢

指定元素

0 个答案: