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> 

请注意，此代码是未经测试，只是一个建议你如何实现它。