獲取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正在接收正確的參數。顯示你只發送$索引。

本來只是簡單地將它作爲評論，但尚未在聲譽方面做出評價。 :-)