AngularJS - 在方法内丢失控制器范围

Question

Angular noob在这里。我试图创建一个表单作为指令。 ng-submit调用控制器操作，但是，在该方法中，我无法访问控制器范围，即。 $scope。

这是让我感到困惑的部分。在我的笔记本电脑和桌面上，当我第一次进入debugger submit()时，$scope仍在范围内。以后每次都没有。

我有一个同事测试这个代码，他们无法重现它。

编辑：如果我在$scope.submit中没有进入调试器，它可以正常工作。

course-material-form.js.coffee

angular
  .module 'app'
  .directive 'courseMaterialForm', () ->
    restrict: 'EA'
    templateUrl: 'app/shared/coursework/course-material/templates/_form.html'
    scope:
      book: '='
      model: '='
    controller: 'CourseMaterialFormCtrl'

course-material-form-ctrl.js.coffee

angular
  .module 'app'
  .controller 'CourseMaterialFormCtrl', ($scope) ->
    $scope.submit = () ->

    return

_form.html.haml

%form.form-compact#course-material-form{ "ng-submit" => "submit()" }
  %fieldset.row
    .form-group.col-xs-12
      %label Title
      %input{ type: 'text', "ng-model" => " book.title " }

    .form-group.col-md-6.col-xs-12
      %label Author
      %input{ type: 'text', "ng-model" => " book.author " }

  %fieldset.row
    .form-group.col-md-6.col-xs-12
      %label Publisher
      %input{ type: 'text', "ng-model" => " book.publisher " }

    .form-group.col-md-6.col-xs-12
      %label Publication Year
      %input{ type: 'text', "ng-model" => " book.publication_date " }

    .form-group.col-md-6.col-xs-12
      %label Edition
      %input{ type: 'text', "ng-model" => " book.edition " }

    .form-group.col-md-6.col-xs-12
      %label ISBN
      %input{ type: 'text', "ng-model" => " book.isbn " }

  %fieldset.row
    .form-group.col-xs-12
      %label Description
      %textarea{ "ng-model" => "book.description" }

  %fieldset.row.hidden
    .form-group.col-md-6.col-xs-6
      %label URL
      %input{ type: 'text' }

_modal.html.haml

.modal-dialog.modalbox-dialog.coursework-form-modal
  .modal-content

    %header.modal-header.modal-header-lg
      .modal-heading
        %span{ "ng-if" => "!book" } Add
        %span{ "ng-if" => "book" } Edit
        Course Material

      %button.modal-close-btn.modal-close-icon{ "ng-click" => "$dismiss()" }
        %i.fa.fa-times-circle

    .modal-body
      %course-material-form{ model: "model", book: "book" }

    .modal-footer
      %button.btn.btn-primary.modal-footer-btn{ form: "course-material-form",
                                                type: "submit" }
        %span{ "ng-if" => "!book" } Create
        %span{ "ng-if" => "book" } Save
      %button.btn.btn-outline.modal-footer-btn{ "ng-click" => "$dismiss()",
                                                type: "button" }
        Close

Answer 1

submit和controller中的directive功能不一样。它们属于不同的$scope。有关它的更多信息，请参阅Directive's guide

中的“隔离指令范围”部分

由于您正在隔离指令的范围，因此您应该将控制器中的提交函数“公开”到您的指令中：

scope: {
    book: '=',
    model: '=',
    submit: '&' // <- that's what you need
}

然后在_modal.html上传递一个新属性：

.modal-body
    %course-material-form{ model: "model", book: "book", submit: "submit()" }

Answer 2

我不知道这是否有资格作为答案。我实际上并没有在控制器方法中调用$scope。如果您$scope.book，那么$scope在调试器中可用。