在一个函数中的模态不能从另一个函数中访问

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