Question

我有一个带有视图按钮的表，当单击视图模式显示时，但现在我想在模态上显示某些数据。我正在使用 .html 页面。

我不确定我在这里缺少什么

HTML

<td>
    <span>
        <input class="btn btn-sm btn-dark" data-ng-click="launch('create',client)" type="button" value="view" />
    </span>
</td>

这将支持模态

模态

<div class="modal fade  in" ng-controller="dialogServiceTest">
<div class="modal ng-scope">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span class="glyphicon glyphicon-star"></span> Client Details
                </h4>
            </div><div class="modal-body">
                <ng-form name="nameDialog" novalidate="" role="form" class="ng-pristine ng-invalid ng-invalid-required">
                    <div class="form-group input-group-lg" ng-class="{true: 'has-error'}[nameDialog.username.$dirty &amp;&amp; nameDialog.username.$invalid]">
                        <label class="control-label" for="username">Name:</label>
                        <input type="text" name="username" id="username" ng-model="client.ClientName" ng-keyup="hitEnter($event)" required="">
                        <span class="help-block">Enter your full name, first &amp; last.</span>
                    </div>
                    <div>{{client.ClientName}}</div>
                </ng-form>
            </div><div class="modal-footer">
                <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
                <button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty &amp;&amp; nameDialog.$invalid) || nameDialog.$pristine" disabled="disabled">Save</button>
            </div>
        </div>
    </div>
</div>

角

angular.module('modalTest', ['ngRoute','ui.bootstrap', 'dialogs'])
.controller('dialogServiceTest', function ($scope,$http, $rootScope, $timeout, $dialogs) {
    $scope.clients = []; //Array of client objetcs
    $scope.client = {}; //Single client object

    $scope.launch = function (which,client) {
        var dlg = null;

        alert(client.ClientName);
        dlg = $dialogs.create('/templates/Modal.html', 'whatsYourNameCtrl', {}, { key: false, back: 'static' });
        dlg.result.then(function () {
                $scope.client.ClientName = client.ClientName;
     });
})
.run(['$templateCache', function ($templateCache) {
    $templateCache.put('/templates/Modal.html');
 }]);

Answer 1

我认为您正在寻找的是resolve属性，您可以使用$modal服务。我不确定您使用的是哪个版本的UI Bootstrap，但最新版本的工作原理如下：

var myModal = $modal.open({
    templateUrl: '/some/view.html',
    controller: 'SomeModalCtrl',
    resolve: {
        myInjectedObject: function() { return someObject; }
    });
myModal.result.then(function(){
    // closed
}, function(){
    // dismissed
});

然后你可以在模态控制器中使用注入的解析值：

app.controller('SomeModalCtrl', function ($scope, $modalInstance, myInjectedObject) {
    // use myInjectedObject however you like, eg:
    $scope.data = myInjectedObject;
});

Answer 2

这是我的一些代码

$scope.showScreenSizePicker = function(){
        $scope.actionmsg = "";
        var modalWindow = $modal.open({
            templateUrl: '{{url()}}/modals/modalScreenSizePicker',
            controller: 'modalScreenSizePickerController',
            resolve: {
            titletext: function() {return "Screen Sizes: ";},
            oktext: function() {return "Close";},
            canceltext: function() {return "Cancel";},
            labeltext: function() {return "";},
            }});
    modalWindow.result.then(function(returnParams) {
        $scope.setViewSize(returnParams[0], returnParams[1]);
    });
}

你可以看到我使用resolve将变量传递给模态。如果要从模态中传回值，可以获取变量returnParms（array）

这是我的控制器代码：

angular.module('myWebApp').controller('modalScreenSizePickerController', function($scope, $modalInstance, titletext, labeltext, oktext, canceltext) {
      $scope.titletext = titletext;
      $scope.labeltext = labeltext;
      $scope.oktext = oktext;
      $scope.canceltext = canceltext;
      $scope.customHeight = 800;
      $scope.customWidth = 600;
      $scope.selectCustomSize = function(width, height){
        if (width < 100){ width = 100; }
        if (height < 100){ height = 100; }
        $scope.selectItem(width, height);
      }
       $scope.selectItem = function(width, height) {
        var returnParams = [width, height];
          $modalInstance.close(returnParams);
      };
      $scope.cancel = function() {
        $modalInstance.dismiss();
      };
    });

希望我的样本有帮助

Answer 3

您可以使用“$ scope。$ parent.client”访问模式中的客户端 - “$ parent”为您提供$ scope，其中模态已打开所有数据。

将值绑定到UI Bootstrap Modal

3 个答案: