Angular Modal Service如何在模态弹出窗口内编写函数。 Orelse如何在Modal Pop Up中传递新的控制器功能

时间:2016-08-25 11:59:26

标签: javascript jquery angularjs twitter-bootstrap

这是Modal弹出的代码。我必须在控制器内插入该功能。这里如何传递模态弹出控制器内的功能。

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

这是我必须在模态弹出窗口内传递的函数。代替控制器。应用手动功能是在服务中写入的功能名称。它必须在一个单独的控制器内调用。请提出一些其他解决方案。

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>

1 个答案:

答案 0 :(得分:0)

你的问题不明确,但我想这仍然是你的问题。

从HTML中您必须显示模态和写入功能,这些功能在按钮中执行,单击模态内部。

对于这个问题,我建议您使用以下

http://localhost/api/People('ChildId')/Parent

你的控制器看起来像

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