角度Boostrap模态服务

时间：2017-05-21 09:52:34

标签： angularjs

我在单击Angular UI Grid上的编辑按钮时尝试打开模态。我是Angular的新手，还在学习。我已经做了一些搜索，但仍然无法解决如何将我的模态实例注入StaffController，因此可以使用它。非常感谢任何建议/帮助。谢谢，

我正在使用角度模态示例：https://angular-ui.github.io/bootstrap/

索引文件（包含网格和示例模态按钮）：

@*Staff Grid*@
<body ng-app="Application">
<div ng-controller="ApiStaffController">
    <div class="table-responsive angular-grid" ui-grid="gridOptions" ui-
grid-move-columns ui-grid-resize-columns ui-grid-exporter ui-grid-selection>
    </div>
</div>

<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">Create User</h3>
        </div>
        <div class="modal-body" id="modal-body">
            <label asp-for="Person.Forename" class="control-label"></label>
            <input type="text" class="form-control" ng-model="$ctrl.newUser.Forename" />
            <label asp-for="Person.Surname" class="control-label"></label>
            <input type="text" class="form-control" ng-model="$ctrl.newUser.Surname" />
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()" ng-disabled="!$ctrl.newUser.Forename || !$ctrl.newUser.Surname">OK</button>
            <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
        </div>
    </script>

    <script type="text/ng-template" id="stackedModal.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
        </div>
        <div class="modal-body" id="modal-body-{{name}}">
            Having multiple modals open at once is probably bad UX but it's technically possible.
        </div>
    </script>


    <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
    <button type="button" class="btn btn-default" ng-click="$ctrl.open('lg')">Large modal</button>
    <button type="button" class="btn btn-default" ng-click="$ctrl.open('sm')">Small modal</button>
    <button type="button" class="btn btn-default" ng-click="$ctrl.open('sm', '.modal-parent')">
        Modal appended to a custom parent
    </button>
    <button type="button" class="btn btn-default" ng-click="$ctrl.toggleAnimation()">Toggle Animation ({{ $ctrl.animationsEnabled }})</button>
    <button type="button" class="btn btn-default" ng-click="$ctrl.openComponentModal()">Open a component modal!</button>
    <button type="button" class="btn btn-default" ng-click="$ctrl.openMultipleModals()">
        Open multiple modals at once
    </button>
    <div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
    <div class="modal-parent">
    </div>
</div>

我有一个名为：ModalController的文件，其中包含以下内容:(这是来自示例）

angular.module('Application').controller('ModalDemoCtrl', function 
($uibModal, $log, $document) {
var $ctrl = this;
$ctrl.items = ['item1', 'item2', 'item3'];

$ctrl.animationsEnabled = true;

$ctrl.open = function (size, parentSelector) {
    var parentElem = parentSelector ?
        angular.element($document[0].querySelector('.modal-demo ' + 
parentSelector)) : undefined;
    var modalInstance = $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        controllerAs: '$ctrl',
        size: size,
        appendTo: parentElem,
        resolve: {
            items: function () {
                return $ctrl.items;
            }
        }
    });

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

$ctrl.openComponentModal = function () {
    var modalInstance = $uibModal.open({
        animation: $ctrl.animationsEnabled,
        component: 'modalComponent',
        resolve: {
            items: function () {
                return $ctrl.items;
            }
        }
    });

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

$ctrl.openMultipleModals = function () {
    $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: 'modal-title-bottom',
        ariaDescribedBy: 'modal-body-bottom',
        templateUrl: 'stackedModal.html',
        size: 'sm',
        controller: function ($scope) {
            $scope.name = 'bottom';
        }
    });

    $uibModal.open({
        animation: $ctrl.animationsEnabled,
        ariaLabelledBy: 'modal-title-top',
        ariaDescribedBy: 'modal-body-top',
        templateUrl: 'stackedModal.html',
        size: 'sm',
        controller: function ($scope) {
            $scope.name = 'top';
        }
    });
};

$ctrl.toggleAnimation = function () {
    $ctrl.animationsEnabled = !$ctrl.animationsEnabled;
};
});

//请注意$ uibModalInstance表示模态窗口（实例）依赖项。 //它与上面使用的$ uibModal服务不同。

angular.module('Application').controller('ModalInstanceCtrl', function 
($uibModalInstance, StaffService, items) {
var $ctrl = this;
$ctrl.items = items;
$ctrl.selected = {
    item: $ctrl.items[0]
};

$ctrl.ok = function () {
    alert($ctrl.newUser.Forename);
    alert($ctrl.newUser.Surname);
    //$uibModalInstance.close($ctrl.selected.item); //Untill we do the saving staff
};

$ctrl.cancel = function () {
    $uibModalInstance.dismiss('cancel');
};
});

//请注意，关闭和解除绑定来自$ uibModalInstance。

angular.module('Application').component('modalComponent', {
templateUrl: 'myModalContent.html',
bindings: {
    resolve: '<',
    close: '&',
    dismiss: '&'
},
controller: function () {
    var $ctrl = this;

    $ctrl.$onInit = function () {
        $ctrl.items = $ctrl.resolve.items;
        $ctrl.selected = {
            item: $ctrl.items[0]
        };
    };

    $ctrl.ok = function () {
        $ctrl.close({ $value: $ctrl.selected.item });
    };

    $ctrl.cancel = function () {
        $ctrl.dismiss({ $value: 'cancel' });
    };
}
});`

我在这里有一个人员控制器，它从API调用中返回数据，以填充UI网格。

var editButtonTemplate = '<div class="ui-grid-cell-contents"><button type= 
"button" class="btn btn-xs btn-primary" ng-
click="grid.appScope.vm.editRow(grid, row)" <i class="fa fa-edit"></i>
</button></div>'

/*Staff Grid*/
app.controller('ApiStaffController', function ($scope, StaffService) {

$scope.gridOptions = {
    data: 'Data',
    enableFiltering: true,
    showGroupPanel: true,
    enableGridMenu: true,
    resizable: true,
    enableColumnResizing: true,
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    showGridFooter: true,
    noUnselect: true,
    multiSelect: false,
    modifierKeysToMultiSelect: false,
    noUnselect: true,
    columnDefs: [{ field: 'person.forename', displayName: 'Forename' },
    { field: 'person.surname', displayName: 'Surname' },
    { field: 'person.dateofbirth', displayName: 'DOB' },
    { field: 'employmentStartDate', displayName: 'Employment Start Date' },
    { field: 'employmentEndDate', displayName: 'Employment End Date' },
    { name: 'edit', displayName: 'Edit', cellTemplate: editButtonTemplate },
    { name: 'delete', displayName: 'Delete', cellTemplate: '<button id="deleteBtn" type="button" class="btn-xs btn-danger fa fa-1x fa-trash-o" ng-click="$parent.$parent.deleteTeam(row.entity)"></button> ' }]
};

/*Gets all the staff records using the service*/
GetAllStaff();
function GetAllStaff() {
    var promiseGet = StaffService.getAllStaff();
    promiseGet.then(function (pl) { $scope.Staff = pl.data, $scope.Data = pl.data },
        function (errorPl) {
            $log.error('Error Getting Records.', errorPl);
        });
}
});

1 个答案:

答案 0 :(得分：0)

我设法通过将$ uibModal注入人员控制器来解决这个问题，如下所示： app.controller('ApiStaffController', function ($scope, StaffService, $uibModal)

然后通过显示这样的模态来测试它：

  var modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope, //passed current scope to the modal
    size: 'lg'
});

如果有更好/更灵活的方式，我感谢所有反馈，谢谢。

相关问题
最新问题