Question

我试图在组件中打开一个模态，但我发现的所有示例都没有涵盖组件。这是我到目前为止所拥有的。我没有收到任何错误消息。

JS

// angular 1.5.8

(function () {
    var app = angular.module("foo-main");

    app.component("FooAssets", {
        templateUrl: "foo-content.html",
        controllerAs: "FooModel",
        controller: ["BarService", "FormService", "$uibModal", FooController]
    });

    function FooController(BarService, FormService, $uibModal) {
        var FooModel = this;
        FooModel.bar = 1;

        FooModel.openModal = function (size) {
            FooModel.modalInstance = $uibModal.open({
            animation: false,
            templateUrl: 'modal.html',
            controller: 'ModalController',
            size: size
        });

        FooModel.modalInstance.result.then(function () {

        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        }); 
    };
});
app.controller('ModalController', [ '$uibModal', 'FooModel', 'FormService', ModalController ]);

    function ModalController($uibModalInstance, FooModel, FormService) {
        var ModalController = this;
        FooModel.bar = 2;
    }
} ());

HTML

<li class="action-button">
    <img ng-src="foo.png" ng-click="FooModal.openSaveAsReport('md')">
    Foo
</li>
<script type="text/ng-template" id="modal.html">
    Test {{FooModel.bar}} // "Test 2" should be output on a modal window
</script>

其他人编写了组件代码，所以除了模态之外，它们都在工作。还要注意那里有一个与组件分开的模态控制器。我认为我已经接近了，但我还没有意识到依赖关系是如何传递给组件/控制器的。

组件中的uib-modal

0 个答案: