如何在操作後打開警報引導程序模式

我發現這篇文章「Bootstrap alert message represented as modal, angular 」非常有趣，因爲我是angularjs的新手。試圖瞭解指令如何在成功操作後調用警報，而不是默認情況下在文章示例中顯示的點擊上？如何在操作後打開警報引導程序模式

我一直在試圖做我的變化，但我打破了代碼

HTML

<!doctype html> 
<html ng-app="plunker"> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

    <div ng-controller="DialogDemoCtrl"> 
     <div class="row-fluid"> 
      <button class="btn btn-success" ng-click="open2()" >success 
       <my-alert 
       bold-text-title="Done" 
       text-alert="Some content" 
       mode="success" 
       ></my-alert> 
      </button> 
     </div> 
    </div> 
    </body> 
</html>

angular.module('plunker', ['ui.bootstrap']) 
.directive('myAlert', function($modal,$log) { 
     return { 
     restrict: 'E', 
     scope: { 
      mode: '@', 
      boldTextTitle: '@', 
      textAlert : '@' 
     }, 
     templateUrl: 
      '<div class="modal-body" style="padding:0px">' 
      + ' <div class="alert alert-{{data.mode}}" style="margin-bottom:0px">' 
      + '  <button type="button" class="close" data-ng-click="close()" >' 
      + '  <span class="glyphicon glyphicon-remove-circle"></span>' 
      + ' </button>' 
      + ' <strong>{{data.boldTextTitle}}</strong> {{data.textAlert}}' 
      + ' </div>' 
      + '</div>', 
     link: function(scope, elm, attrs) { 

     scope.data= { 
       mode:scope.mode || 'info', 
       boldTextTitle:scope.boldTextTitle || 'title', 
       textAlert:scope.textAlert || 'text' 
       } 

     var ModalInstanceCtrl = function ($scope, $modalInstance, data) { 

      console.log(data); 

      $scope.data = data; 
      $scope.close = function(){ 
      $modalInstance.close($scope.data); 
      }; 
     }; 

     // elm.parent().bind("click", function(e){ 
     //  scope.open(); 
     // }); 

    scope.open = function() { 

     var modalInstance = $modal.open({ 
      templateUrl: 'myModalContent.html', 
      controller: ModalInstanceCtrl, 
      backdrop: true, 
      keyboard: true, 
      backdropClick: true, 
      size: 'lg', 
      resolve: { 
      data: function() { 
       return scope.data; 
      } 
      } 
     }); 


     modalInstance.result.then(function (selectedItem) { 
      scope.selected = selectedItem; 
     }, function() { 
      $log.info('Modal dismissed at: ' + new Date()); 
     }); 
    } 
    } 
    }; 
}) 

function DialogDemoCtrl($scope, $log, $modal){ 
    $scope.open2 = function(){ 
     console.log('DialogDemoCtrl - opened'); 
     if(1 + 1 == 2){ //This is supposed to be true from a response value 
     //TODO OPEN HERE THE SUCCESS MODAL 
     //$scope.open(); 
     }else{ 
     //TODO OPEN HERE THE ERROR MODAL 
     } 
    } 
}

來源

2017-07-25 Maximus Decimus

試試這個plunker例如，http://embed.plnkr.co/As959V/

angular.module('plunker', ['ui.bootstrap']); 
    var ModalDemoCtrl = function ($scope, $modal, $log) { 

     $scope.user = { 
      user: 'name', 
      password: null, 
      notes: null 
     }; 

     $scope.open = function() { 

      $modal.open({ 
       templateUrl: 'myModalContent.html', // loads the template 
       backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window 
       windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template 
       controller: function ($scope, $modalInstance, $log, user) { 
        $scope.user = user; 
        $scope.submit = function() { 
         $log.log('Submiting user info.'); // kinda console logs this statement 
         $log.log(user); 
         $modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason 
        } 
        $scope.cancel = function() { 
         $modalInstance.dismiss('cancel'); 
        }; 
       }, 
       resolve: { 
        user: function() { 
         return $scope.user; 
        } 
       } 
      });//end of modal.open 
     }; // end of scope.open function 
    };

來源

2017-07-25 03:55:28

如何在操作後打開警報引導程序模式

回答

相關問題