2016-02-28 99 views
0

的引导模式我想替换的警报中产生成功发送邮件角控制器的引导模式。 (实际的邮件发送香饽饽与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>

现在这里是其他我对此感到困惑。我想应该是一种将模式“存储”在可以从控制器调用的东西中的方式,而不必将整个模态html放在那里,对吗?如果是这样,我该怎么做?

+3

大多数人都使用'角-UI-bootstrap',摆脱'bootstrap.js' – charlietfl

+0

我使用它!照顾我这个方向? :) – LOTUSMS

+0

跟随例如,在文档... JS和HTML代码显示以及plunker演示链接 – charlietfl

回答

1

你可以添加模态到您的视图,然后通过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"); 
     } 

    }; 
}); 
+0

完成!做得好!谢谢! – LOTUSMS

2

对于角度的环境中,你应该使用的用户界面,引导模式的服务。

尝试绑定在工厂代码通过重用它从你的应用程序。只需在控制器/工厂中注入$ uibModal即可。下面

示例代码确认与引导模式服务中删除:

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

这是一个很好的解决方案+1,除非它与注入$ uibModal时的验证冲突。但它会起作用 – LOTUSMS