Angular js - 彈出的值不能反映在ng-model中，並且無法關閉

Question

我正在嘗試使用角度js添加學生的標記詳細信息和教師對學生的評論，如下所示。

我已經在運行時基於圖標上的點擊事件包含從我的controllers.js彈出組件。在運行時，點擊圖標後我可以看到彈出窗口。但它太小了。

1. 我不能給任何值類型的彈出
2. 如果我嘗試從編輯從瀏覽器「檢查元素」選項，那麼還它不是反映到模型「student.notes」
3. 最重要的是，我無法關閉彈出窗口。

我的html如下。

<div class="ui accordion" ng-repeat="student in students"> 
<input type="text" size="3" placeholder="TotalMarks" ng-model="student.total"></input> 
<input type="text" size="2" placeholder="Rank" ng-model="student.rank"></input> 
<i class="edit icon" ng-click="showTeachersComments($event)"></i> 
</div> 

Teacher.js - 控制器

function _showTeachersComments($event) { 
        var elem = angular.element(**templates.teacherComments**); 
        $compile(elem)($scope); 
        $scope.batsmanCommentId = $event.target.id; 
        console.log("commentid"); 
        console.log($scope.batsmanCommentId); 
        $($event.target) 
         .popup({ 
          html: elem, 
          closable: false, 
          position: 'bottom left', 
          on: '' 
         }) 
         .popup('show'); 
       } 

function _closeTeachersComment($event, note) { 
        console.log("note ="); 
        console.log(note); 
        $scope.battingEntry.notes = note; 
        $('#' + $scope.batsmanCommentId).popup('hide'); 
       }; 

function _init(){ 
$scope.showTeachersComments=_showTeachersComments; 
$scope.closeTeachersComment=_closeTeachersComment; 
} 

我有一個template.js鏈接templates.teacherComments到popupTeacherComment.html。

popupTeacherComment.html

<form class="ui form" id="teacherNotesForm"> 
     <div class="field"> 
     <label for="">Comments</label> 
     <textarea ng-model="**notes**" rows="1" cols="50" name="Comment"></textarea> 
     </div> 
     <div class="ui secondary small menu"> 
     <div class="right small menu"> 
     <a class="item" href="" ng-click="closeTeacherComment($event,notes)">Cancel</a> 
     </div> 
    </div> 
</form> 

Answer 1

如果您正在使用角UI這一點，爲什麼不使用$modal服務？

正如我所看到的，你不會給彈出任何id。

var elem = angular.element(**templates.teacherComments**); 
$compile(elem)($scope); 
$scope.batsmanCommentId = $event.target.id; 
$(elem).attr("id", $scope.batsmanCommentId); // <-- this is missing to select it later on 
console.log("commentid"); 

我想，這就是爲什麼你不能關閉它。

是的，它不能反映student.notes，因爲你編譯與控制器範圍的視圖。在控制器範圍內，它將搜索student.notes，並且不會有像這樣的任何變量。

我會推薦將這段代碼（因爲在控制器中使用jquery是一種不好的做法）轉換爲指令並將學生傳遞到隔離範圍。

<div class="ui accordion" ng-repeat="student in students" comment-popout comment-popout-student="student">  
</div> 

而且指令：在NG-模型

app.directive("commentPopout", function($compile){ 
    return { 
    scope: { 
     "commentPopoutStudent": "=" 
    }, 
    template: '<input type="text" size="3" placeholder="TotalMarks" ng-model="commentPopoutStudent.total"></input> 
    <input type="text" size="2" placeholder="Rank" ng-model="commentPopoutStudent.rank"></input> 
    <i class="edit icon" ng-click="openPopout()"></i>', 
    link: function($scope, $element){ 
      $scope.openPopout = function(){ 
       var elem = angular.element(**templates.teacherComments**); 
       $compile(elem)($scope); 
       $($event.target).popup({ 
          html: elem, 
          closable: false, 
          position: 'bottom left', 
          on: '' 
         }) 
         .popup('show'); 
      } 
    } 

    } 
}); 

而且模板變量需要被命名爲像指令：

<form class="ui form" id="teacherNotesForm"> 
     <div class="field"> 
     <label for="">Comments</label> 
     <textarea ng-model="commentPopoutStudent.notes" rows="1" cols="50" name="Comment"></textarea> 
     </div> 
     <div class="ui secondary small menu"> 
     <div class="right small menu"> 
     <a class="item" href="" ng-click="closeTeacherComment($event,notes)">Cancel</a> 
     </div> 
    </div> 
</form> 

請注意，此代碼是未經測試，只是一個建議你如何實現它。