AngularJS

Question

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

这是真正让我困惑的部分。在我的笔记本电脑和台式机上，我第一次进入 submit() 中的 debugger 时，$scope 仍在范围内。随后的每一次，它都不是。

我让同事测试了这段代码，但他们无法重现。

编辑：如果我在 $scope.submit 的那个时候不进入调试器，它工作正常。

课程-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'

课程-material-形式-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

您的 controller 和 directive 中的 submit 函数不同。他们属于不同的$scope。有关它的更多信息，请参见 Directive's guide

的 "Isolating the Scope of a Directive" 部分

由于您正在隔离指令的范围，因此您应该 "expose" 从控制器到指令的提交函数，如下所示：

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 在调试器中可用。

AngularJS - 在方法中丢失控制器作用域

AngularJS - Losing controller scope within method

javascript

coffeescript

课程-material-form.js.coffee

课程-material-形式-ctrl.js.coffee

_form.html.haml

_modal.html.haml