获取AngularJS应用程序以在点击上显示模态

Question

我正在列出我的时间表项目，现在我试图在单击特定项目的编辑时显示模态。我的目标是能够编辑我的条目的值。但首先，不能得到模态，甚至显示

见my plunker或代码如下

HTML

<div class="container" ng-app="appUserSchedule"> 
<div ng-controller="CtrlUserSchedule" > 

    <div class="row"> 
    <div class="col-md-10 col-md-offset-1"> 
    <div class="panel panel-default"> 
    <div class="panel-heading">User Schedule</div> 

    <div class="panel-body"> 

    <div ng-cloak style="max-width:400px;"> 
     <header> 
     <h3>User schedule</h3> 
     </header> 
     <ul> 
     <li ng-repeat="x in userscheds">{{x.week_day}} {{x.time_start}}-{{x.time_end}} 
      <span ng-click="showModal($index)" style="cursor:pointer;">Edit</span> 
      <span ng-click="removeItem($index)" style="cursor:pointer;">Delete</span> 
     </li> 
     </ul> 
     <div> 
     <div> 
      <div> 
      <input placeholder="Add user schedule entry here" ng-model="addMe"> 
      </div> 
      <div> 
      <button ng-click="addItem()">Add</button> 
      </div> 
     </div> 
     <p>{{errortext}}</p> 
     </div> 
    </div> 


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

<!-- Modal --> 
<div class="modal fade" id="modalContent.html" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Edit</h4> 
    </div> 
    <div class="modal-body"> 
     <timepicker ng-model="dt1" hour-step="1" minute-step="15" show-meridian="true"></timepicker> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 

</div> 
</div> 



</div> <!-- ng-controller --> 
</div> <!-- ng-app --> 

JS

var app = angular.module("appUserSchedule", []); 
app.controller("CtrlUserSchedule", function($scope,$http,$location) { 

    $http.get('userschedule.json').success(function(data, status, headers, config) { 
     $scope.userscheds = data.userschedules; 

     console.log(data); 
    }).error(function(data, status, headers, config) { 
     console.log("No data found.."); 
    }); 

    $scope.addItem = function() { 
     $scope.errortext = ""; 
     if (!$scope.addMe) {return;} 
     if ($scope.userscheds.indexOf($scope.addMe) == -1) { 
      $scope.userscheds.push($scope.addMe); 
     } else { 
      $scope.errortext = "The item is already in your list."; 
     } 
    } 
    $scope.removeItem = function (x) { 
     $scope.errortext = "";  
     $scope.userscheds.splice(x, 1); 
    } 


    $scope.showModal = function (action, x) { 

     var modalInstance; 

     modalInstance = $modal.open({ 
     templateUrl: 'modalContent.html', 
     controller: 'CtrlUserSchedule', 
     scope: $scope 
     }); 

     // This code for later       
     // Save User Schedule Entry after making a change, then close modal  
      saveUserScheduleEntry = function(event) { 

      $http.put('').success(function(eventsuccess){ 
      }).error(function(err){ 
      /* do something with errors */ 
      }); 
      modalInstance.close(); 
     }; 

     // This code for later 
     // Close modal  
      closeUserScheduleEntry = function(event) { 

      $http.put('').success(function(eventsuccess){ 
      }).error(function(err){ 
      /* do something with errors */ 
      }); 
      modalInstance.close(); 
     };   




    } 


}); 

Answer 1

ng-repeat创建了自己的范围，因此您的控制器的范围和ng-repeat内的范围是不一样的。 因此$ scope.showModal将不会在ng-repeat内定义。

你在这里做的主要错误是“那里总是有一个点”规则。

看这里： Why don't the AngularJS docs use a dot in the model directive?

我会推荐给约需最制成angularjs错误首先小教程，因为确实有一些东西了解angularjs停止运行到小陷阱这样了。

此外，你没有注入$模态到你的控制器，这应该导致像$模态的错误是未定义或类似的东西。

此外，您甚至没有创建/添加您即将打开的相应html文件。

最后但并非最不重要的是你没有添加任何依赖关系到你的角度模块有关bootstrap。所以你的应用程序将无法使用/注入$ modal。

看到一个工作plunkr这里：

http://plnkr.co/edit/rOjXt1C4E6lHRXUqHdHq?p=preview

看看我在哪里“把圆点”

$scope.ctrl = this; 

行我用一个简单的模板，因为更换了templateUrl我认为这是足够的想法。

最后，我不得不说有所以你的代码有很多错误，你真的应该尝试自己调试更多，并尝试一步步完成更多的事情。 因为已经有4-5个错误，所以这个代码几乎不可能是你自己的，而是一些随机拷贝&从任何地方粘贴东西。否则你不可能完成许多不做任何事情的不同代码行，对不起。

Answer 2

首先是你需要ui.bootstrap模块添加到你是一个角度的应用程序，并通过$modal像你这样的控制器

var app = angular.module("appUserSchedule", ['ui.bootstrap']); 
app.controller("CtrlUserSchedule", function($scope,$http,$location, $modal) { 

然后您需要添加modalContent.html。这显示模态窗口内的html

Answer 3

这可能不是答案，但要确保showModal正在接收正确的参数。显示你只发送$索引。

本来只是简单地将它作为评论，但尚未在声誉方面做出评价。 :-)