操作后如何打开警报引导程序模式

Question

I found this article " Bootstrap alert message represented as modal, angular " very interesting as I am new to angularjs. 我发现本文“ 以模式，角度表示的Bootstrap警报消息 ”非常有趣，因为我是angularjs的新手。 Trying to understand directives how can I do to call the alert after a successful operation and not by default on the click as shown on the example of the article? 试图了解指令，如何在成功执行操作后如何调用警报，而不是默认情况下如本文示例所示单击来调用警报？

I ve been trying to do my changes but I broke the code 我一直在尝试进行更改，但是我破坏了代码

html 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>

js JS

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 
      }
    }
}

Answer 1

Try this plunker example, http://embed.plnkr.co/As959V/ 尝试以下示例， 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
    };

操作后如何打开警报引导程序模式

问题描述

1 个解决方案

解决方案1
0 2017-07-25 03:55:28

操作后如何打开警报引导程序模式

问题描述

1 个解决方案

解决方案1 0 2017-07-25 03:55:28

解决方案1
0 2017-07-25 03:55:28