2016-02-28 118 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