页面加载时的 Angular-UI Bootstrap 模态触发器答案

【问题标题】：Angular-UI Bootstrap Modal trigger on page load页面加载时的 Angular-UI Bootstrap 模态触发器
【发布时间】：2014-12-18 23:47:59
【问题描述】：

虽然我查看了answers here，但仍然无法在页面加载时触发我的openModal() 功能。

在我的控制器中，我有代码（下面的问题），它允许openModal() 从 ng-click 指令或在 Chrome 控制台中输入以下内容时触发正常：

angular.element($0).scope().openModal()

我的问题是当我尝试在页面加载时有条件地打开模式时。我当前的代码是：

$scope.openModal = function (size) {

    modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: 'pageBuilder',
        size: 'lg',
        resolve: {
            items: function () {
                return $scope.chosenDeploymentSchedule;
            }
        }
    });
};

angular.element(document).ready(function () {

//  $scope.openModal();
    console.log('Hello World');
});

我确实打印了我的 Hello World，但是当我尝试取消注释 $scope.openModal(); 时，我得到一个无限循环的 undefined + Hello World 打印出来。

【问题讨论】：

标签： angularjs angular-ui

【解决方案1】：

我不知道这个解决方案对于这个问题是否为时已晚，但可能对某人有用。

创建您的正常引导模式

$scope.myDialog = function () {
    $uibModal.open({
       templateUrl: 'templatefolder/modal.html',
       backdrop: 'static',
       windowClass: 'modal',
       size: 'lg',
       controller: function ($scope, $uibModalInstance) {
            $scope.cancel = function () {
               $uibModalInstance.dismiss();
            };
          }
    });
};

在您的 html 页面中调用模态框，如下所示 <span ng-init="myDialog()"></span>

就是这样。这对我有用，我希望它也适用于某人。

【讨论】：

ng-init 做到了！

【解决方案2】：

您可以直接在控制器中定义它的下方调用$scope.openModal()。它会立即打开模态。

【讨论】：

我对其进行了测试，对我来说效果很好。你能制作一个 plunkr 来解决问题吗？

【解决方案3】：

虽然仍然无法直接从同一个控制器中调用它，但我的解决方案是添加另一个方法，该方法从视图中的 ng-init 调用：

$scope.launchModalConditionally = function(){
    if(!$scope.gotCredentials){
        $scope.openModal();
    }
};

【讨论】：