Angular Modal Service如何在Modal popup中编写函数.如何在模态弹出框中传递一个新的控制器函

Angular Modal Service how to write the function inside modal popup. Orelse How to pass a new controller function inside Modal Pop Up

本文关键字：Modal 一个 控制器 popup Service 函数 模态 Angular      更新时间：2023-09-26

这是显示模态弹出窗口的代码。我必须将函数插入到控制器中。这里是如何在模态弹出式控制器中传递函数。

scope.show = function(ChartData) {
    ModalService.showModal({
        templateUrl: "scaleRecipePopUp.html",
        controller:function(){
            // Here i have to pass the function. 
        }
    }).then(function(modal) {
        modal.element.modal();
        modal.close.then(function(result) {
            scope.message = "You said " + result;
        });
    });
}

这是我必须在模态弹出框内传递的函数。代替控制器。Apply manual函数是在service中写入的函数名。要么它必须在一个单独的控制器中调用。请建议一些其他的解决方案。

this.applyManualScale = function(){    
    if(scope.isAutoScale){
       scope.max[scope.idNum] = null;
       scope.min[scope.idNum] = null;
       scope.isAutoScaleArr[scope.idNum] = true;
       scope.plotDataSeries();
       $('#scaleModal').modal('hide');
    }
    else if(scope.maxVal!=null && scope.minVal!=null){
       scope.max[scope.idNum] = scope.maxVal;
       scope.min[scope.idNum] = scope.minVal;
       scope.isAutoScaleArr[scope.idNum] = false;
       scope.plotDataSeries();
       $('#scaleModal').modal('hide');
    }
};
这是我的指令 
.directive('hcarea', function (Data, ModalService) {
    return {
        restrict: 'E',
        templateUrl: "../page/trendChart.html",
        scope: {
          options: '='
        },
        link: function (scope, element) {   
            var chart;
            scope.show = function() {
                    ModalService.showModal({
                        templateUrl: "scalePopUp.html",
                        controller:function(){
                        }
                    }).then(function(modal) {
                        modal.element.modal();
                        modal.close.then(function(result) {
                            scope.message = "You said " + result;
                        });
                    });
                };
                }
                }
                }

这是我的html文件，它被认为是ng-template。

<script type="text/ng-template" id="modal.html">
     <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Yes or No?</h4>
          </div>
          <div class="modal-body">
            <p>It's your call...</p>
            <p>Fry lives in {{futurama.city}}</p>
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
          </div>
        </div>
      </div>
    </div>
 </script>

你的问题不清楚，但我仍然认为这是你的问题。

从HTML你必须显示一个模态和写入功能，这是在按钮点击模态内执行。

对于这个问题，我建议你采用以下方法

 <div ng-controller="SampleController">
    <!--your HTML content-->
     <button class="btn btn-default"  data-toggle="modal" data-target="#myModal">
                  Button
     </button>
<!--Your modal content will be as below-->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times</button>
        <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
        <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="ButtonClickMethod()">CustomButton</button>
    </div>
   </div>
 </div>
</div>

你的控制器看起来像

angular.module('myApp').controller('SampleController',
        function ($scope) {
            $scope.ButtonClickMethod = function () {
                    your logic goes here
            };
});
相关文章：