Question

我是AngularJS的新手，正在开发我的第一个移动应用程序，从Ionic Framework开始。我有一个部分，我让用户点击“写评论”按钮。这反过来打开一个附有形式的离子模态。当用户填写表格并点击后，我将使用该数据执行某些操作，然后它调用的函数会破坏模态窗口。提交表单后会抛出错误，每次打开写入查看按钮时都会收到数据。

打开模态的代码：

  <a ng-controller="openReviewCtrl" ng-click="openModal()" class="item item-icon-left">
    <i class="icon ion-compose"></i>
    Write a Review (10 POINTS)
  </a>

查看表单模板：

<div class="modal" >
  <header class="bar bar-header bar-positive">
    <h1 class="title">Write Review</h1>
    <button class="button button-clear button-positive" ng-click="closeModal()">Cancel</button>
  </header>
  <ion-content has-header="true" padding="true">
    <form class="list">
      <label class="item item-input">
        <input type="text" placeholder="Full Name" ng-model="review.author"  name="fullName">
      </label>
      <label class="item item-input">
        <textarea placeholder="Review" cols="50" ng-model="review.text"  name="review"></textarea>
      </label>
      <button class="button button-full button-positive"  ng-click="writeReview(review)" />Post</button>
    </form>
  </ion-content>
</div>

最后我的Controller代码（目前只记录数据）：

.controller('openReviewCtrl', function($scope, $ionicModal) {
    $scope.master = {};
  $ionicModal.fromTemplateUrl('templates/review.html', function(modal) {
    $scope.modal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });

  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Be sure to cleanup the modal
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
     $scope.writeReview = function(review) {
        console.log(review);
        $scope.modal.remove();
  };
})

点击“撰写评论”模式后，会打开数据被写入并提交记录写得很好并关闭Modal 点击“写评论”再次抛出错误
发布按钮重置页面并取消不起作用

TypeError: Cannot call method '$broadcast' of null
    at ionic.views.Modal.inherit.show (http://angular.dev:8888/www/lib/js/ionic.bundle.js:31554:26)
    at Scope.$scope.openModal (http://angular.dev:8888/www/js/controllers.js:49:18)
    at http://angular.dev:8888/www/lib/js/ionic.bundle.js:17182:21
    at http://angular.dev:8888/www/lib/js/ionic.bundle.js:33774:11
    at Scope.$eval (http://angular.dev:8888/www/lib/js/ionic.bundle.js:18939:28)
    at Scope.$apply (http://angular.dev:8888/www/lib/js/ionic.bundle.js:19039:23)
    at HTMLAnchorElement.<anonymous> (http://angular.dev:8888/www/lib/js/ionic.bundle.js:33773:15)
    at http://angular.dev:8888/www/lib/js/ionic.bundle.js:9578:10
    at forEach (http://angular.dev:8888/www/lib/js/ionic.bundle.js:7272:20)
    at HTMLAnchorElement.eventHandler (http://angular.dev:8888/www/lib/js/ionic.bundle.js:9577:5)

造成这种情况的原因是什么？

Answer 1

我相信你需要使用$ ionicModal.fromTemplateUrl方法创建一个新的模态对象，而不是重用旧的模态对象。删除模态对象后，角度绑定和$ scope将被销毁，并在重新打开时不可用。该错误来自模式尝试在已设置为null的$ scope对象上调用广播。

我怀疑你的代码看起来应该是这样的（我不确定你什么时候必须调用“modal.show（）”以便可能必须移动）：

.controller('openReviewCtrl', function($scope, $ionicModal) {
    $scope.master = {};

  function closeModal() {
    if ($scope.modal) {
      $scope.modal.remove();
      delete $scope.modal;
    }
  }

  $scope.openModal = function() {
    $ionicModal.fromTemplateUrl('templates/review.html', function(modal) {
      $scope.modal = modal;
      modal.show();
      }, {
        scope: $scope,
        animation: 'slide-in-up'
      });
  };
  $scope.closeModal = function() {
    closeModal();
  };
  //Be sure to cleanup the modal
  $scope.$on('$destroy', function() {
    closeModal();
  });

  $scope.writeReview = function(review) {
        console.log(review);
        closeModal();
  };
})

据推测，也许可以将离子模态代码修复为可重复使用，但我没有看过这个。

AngularJS：“TypeError：无法调用null的'$ broadcast'方法”

1 个答案: