在一個函數中的模態不能從另一個函數中訪問

Question

我對Angular很陌生，我試圖讓AngularJS模態工作。當我點擊按鈕時，它顯示正常，但模式內的取消按鈕不起作用。

myApp.controller("ServiceController", function($scope, $http, $modal) { 
    var modalInstance; 
    $scope.select = function(id) { 
     this.modalInstance = $modal.open({ 
      animation: $scope.animationsEnabled, 
      templateUrl: 'myModalContent.html', 
      controller: 'ServiceController', 
     }); 

     console.log(this.modalInstance); 
    }; 

    $scope.cancel = function() { 
     console.log(this.modalInstance); <--- this is null 
     this.modalInstance.dismiss('cancel'); 
    }; 
}); 

由於modalInstance變量爲null，所以在Cancel函數中發生錯誤。

任何人都可以請解釋爲什麼這是null，即使select方法明確地指定一個模態實例。

這是HTML代碼如下所示：

<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">update this line</h3> 
    </div> 
    <div class="modal-body"> 
     <input class="form-control" ng-model="client.name"/> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary">Update</button> 
     <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
    </div> 
</script> 

感謝

Answer 1

該方法建議對角自舉網站是使用一個單獨的控制器爲您的模態。這有助於模塊化您的代碼，並將不同的功能分開。試試這個：

myApp.controller("ServiceController", function($scope, $http, $modal) { 
    $scope.select = function(id) { 
     var modalInstance = $modal.open({ 
      animation: $scope.animationsEnabled, 
      templateUrl: 'myModalContent.html', 
      controller: 'modalController', 
     }); 

     console.log(modalInstance); 
    }; 
}); 

myApp.controller('modalController', function ($scope, $modalInstance, items) { 

    $scope.cancel = function() { 
    console.log(modalInstance); 
    $modalInstance.dismiss('cancel'); 
    }; 
});