在自定义指令中设置模态控制器

Question

* 我更新了这个问题以反映我遇到的错误。 *

我希望创建一个可重复使用的自定义模式指令。
我在指令中创建了一个控制器并为模态创建了一个控制器。模态控制器也在指令内部。我在进行这件事时遇到了一些麻烦。

在我的控制台中，我得到

Argument 'ModalInstanceCtrl' is not a function, got undefined.

ModalInstanceCtrl 存在于 open 函数内部

这是一个 link 给我的小伙伴 http://plnkr.co/edit/IQWQJIdgZNNJlHebfe8R?p=preview。

我已经在我的 return 对象中尝试过了。

function myModal() {
        return {
            restrict: 'A',
            scope: {},
            templateUrl: 'modal.html',
            controller: ModalController,
            controllerAs: vm,
            bindToController: true
        }
    }

我创建了一个带有按钮的模板来调用 open()

function ModalController($modal, $log) {
        var vm = this;
        vm.animationsEnabled = true;

        vm.open = open;

        function open() {
            var modalInstance = $modal.open({
                animation: vm.animationsEnabled,
                templateUrl: 'app/components/modal/modal.html',
                controller: 'ModalInstanceCtrl',
                controllerAs: 'vm',
                size: 'lg',
                resolve: {
                    title: function() {
                        return 'training Info';
                    }
                }           
            });
            modalInstance.result.then(function(selectedItem) {
                console.log(selectedItem);
                vm.selectedItem = selectedItem;
            }, function() {
                $log.info('modal dismissed at: ' + new Date());
            });
        } // end of open

        function ModalInstanceCtrl() {
            console.log('in');

        }
    }

这也没有任何作用，并且没有任何错误可以解决。我想知道是否可以或应该采用这种方法？我还想知道如何解决模板在两个地方使用的事实。不确定是否要发表评论（我已经试过了）。以下是完整的指令。

    (function() {
    'use strict';

    angular
        .module('app.components.modal')

        .directive('myModal', myModal);

function myModal() {
                return {
                    restrict: 'A',
                    scope: {},
                    template: 'template: "<button class='btn btn-danger' ng-click='open()'>Beer </button",',
                    controller: ModalController,
                    controllerAs: vm,
                    bindToController: true
                }
            }

            function ModalController($modal, $log) {
                var vm = this;
                vm.animationsEnabled = true;

                vm.open = open;

                function open() {
                    var modalInstance = $modal.open({
                        animation: vm.animationsEnabled,
                        templateUrl: 'app/components/modal/modal.html',
                        controller: 'ModalInstanceCtrl',
                        controllerAs: 'vm',
                        size: 'lg',
                        resolve: {
                            title: function() {
                                return 'training Info';
                            }
                        }           
                    });
                    modalInstance.result.then(function(selectedItem) {
                        console.log(selectedItem);
                        vm.selectedItem = selectedItem;
                    }, function() {
                        $log.info('modal dismissed at: ' + new Date());
                    });
                } // end of open

                function ModalInstanceCtrl() {
                    console.log('in');

                }
            }

    })();

Answer 1

你的代码中有太多问题无法在这里提及，但我修复了一些问题，这样你就可以继续快乐了。

http://plnkr.co/edit/Q8P9mvT99p90O4Xl4hPp

您的代码存在的主要问题之一是您没有将 open 函数定义为方法：

        function open() {

应该是

        this.open = function() {

如果您不知道有什么区别，那么您应该稍微了解一下对象在 Javascript 中的工作原理。或者您可以跳过它并开始使用类在 Typescript 或 ECMAScript 2015 中编码。

请注意：您使用的版本非常旧 angular-bootstrap。此版本不支持使用 controllerAs 语法。因此，我已恢复到 $scope 以使您的代码快速运行。

在自定义指令中设置模态控制器

setting up a modal controller in a custom directive

angularjs

angularjs-directive

angular-ui-bootstrap