Question

我正在尝试使用角度js添加学生的标记详细信息和教师对学生的评论，如下所示。

我在运行时根据图标上的click事件包含了来自controllers.js的弹出组件。在运行时，我可以在单击图标后看到弹出窗口。但它太小了。

我无法在弹出窗口中输入任何值
如果我尝试从浏览器中的“检查元素”选项进行编辑，那么它也不会反映到模型'student.notes'
最重要的是，我无法关闭弹出窗口。

我的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

如果您使用angular-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>

指令：

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');
          }
     }

  }
});

ng-model中的模板变量需要像指令一样命名：

<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>

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

Angular js - 弹出值不会反映在ng-model中，也无法关闭

1 个答案: