Question

*我已更新此问题以反映我遇到的错误。 *

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

我的控制台里面有

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

ModalInstanceCtrl存在于打开功能

中

以下是我的plunker http://plnkr.co/edit/IQWQJIdgZNNJlHebfe8R?p=preview的链接。

我在我的返回对象中尝试过它。

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

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

        function open() {

应该是

        this.open = function() {

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

请注意：您正在使用一个令人难以置信的旧版本角度引导程序。此版本不支持使用controllerAs语法。因此，我已经恢复到范围，以使您的代码快速运行。

在自定义指令

1 个答案: