AngularJS：「TypeError：無法調用方法'$ broadcast'null」

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

在中點擊打開的模式

代碼「寫評論」模式打開。
數據被寫入並提交。
記錄什麼是寫得很好，並關閉莫代爾。
當點擊「發表評論」再次拋出錯誤
郵政按鈕復位頁面並取消不起作用

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

據推測它可能也有可能修復離子模態代碼是可重複使用的，但我沒有看到這一點。