Question

我想替换生成成功发送邮件的Angular控制器中的引导模式的警报。（发送肉和土豆的实际邮件是用PHPMailer完成的）

所以，这是我的控制器：

// create angular controller
app.controller('form', function($scope) {

    // function to submit the form after all validation has occurred            
    $scope.submitForm = function(isValid) {

        // check to make sure the form is completely valid
        if (isValid) {      
           alert('our form is amazing');
        }

    };
});

我想将此来电从alert('our form...')更改为<div class="modal fade in" class="".....</div>

现在这是我困惑的另一部分。我想应该是一种方式来存储＆＃34;可以从控制器中调用的模态，而不必将整个模态html放在那里，我是对的吗？如果是这样，我该怎么做？

Answer 1

对于角度环境，您应该使用Ui-Bootstrap模态服务。

尝试绑定Factory中的代码，以便在整个应用中重复使用它。只需在你的控制器/工厂注入$ uibModal。

下面的示例代码确认使用Bootstrap模式服务删除：

var modalInstance = $uibModal.open({
    animation: true,
    templateUrl: 'myModalContent.html',
    controller: function($scope, $uibModalInstance) {
        $scope.customBody = 'Are you sure to delete?';
        $scope.ok = function() {
            $uibModalInstance.close();
            var _res = DataFactory.deleteData(DataId);
            _res.then(function(data) {
                if (data == 1) {
                    UiFactory.alerts.success('Data deleted successfully!');
                    $rootScope.DataList.splice(index, 1);
                } else {
                    UiFactory.alerts.error('Operation failed! Please try again');
                }
            }, function(error) {
                console.log('Error = ' + error);
            });
        };
        $scope.cancel = function() {
            $uibModalInstance.dismiss('cancel');
        };
    },
    size: 'sm'
});

Answer 2

您可以在视图中添加模态，然后按ID：

调用它

<div id="myModal1" class="modal fade in" class="".....</div>

...

// create angular controller
app.controller('form', function($scope) {

    // function to submit the form after all validation has occurred            
    $scope.submitForm = function(isValid) {

        // check to make sure the form is completely valid
        if (isValid) {      
           angular.element(myModal1).modal("show");
        }

    };
});

从Angular Controller调用bootstrap模式

2 个答案: