Question

我编写了一些简单的代码，允许引导模式与angular一起使用，因为它在单击时将链接加载到模态中。现在，所讨论的链接有自己的角度控制器，它们包含在它们的源中。当加载模态时，我首先使用jquery加载它所有依赖的脚本然后让Angular编译模态，以便它“知道”它。然而，似乎尽管我在加载模态时按需定义控制器，但Angular不会“意识到”它并抛出错误（未捕获错误：参数'ControllerName'不是函数，未定义）

有没有办法告诉Angular识别我在运行时添加的新控制器？

这是我使用fwiw（原型代码）的模态代码：

var directivesModule = angular.module('modal.directives', []);
directivesModule.directive("modal", function(ModalService) {
    return function($scope, elem, attrs) {
            elem.on("click", function(e) {
                e.preventDefault();
                var url = $(this).attr('href');

                ModalService.load(url, $scope);
            });
    };
});

var servicesModule = angular.module('modal.service', []);
servicesModule.factory('ModalService', function ($http, $compile, $rootScope)
{
    var ModalService = {};

    ModalService.load = function(url, scope)
    {
        if ($('.modal[id="'+url+'"]').length > 0)
        {
            ModalService.show($('.modal[id="'+url+'"]'), scope);
            return;
        }

        $http.get(url).success(function (data) {
            var _data = $(data);
            if (_data.find(".modal-body").length == 0) {
                var _data =  $('<div class="modal-header">'
                      + '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>'
                      + '<h3>'+_data.find(".title.hidden").text()+'</h3></div>'
                      + '<div class="modal-body">'+data+'</div>'
                      + '<div class="modal-footer">'
                      + '<button class="btn btn-close">Close</button></div>');
            }

            var _scripts = [];
            var scripts = _data.find("script");
            if (scripts.length > 0)
            {
                scripts.each(function()
                {
                    var elem = $(this);
                    if (elem.attr("src"))
                    {
                        _scripts.push(elem.attr("src"));
                        elem.remove();
                    }
                });
            }

            ModalService.elem = $('<div class="modal hide fade" id="'+url+'">');
            ModalService.elem.append(_data);
            ModalService.elem.appendTo("body");

            if (scripts.length > 0)
            {
                $.getScript(_scripts, ModalService.show.bind(this, ModalService.elem, scope));
            }
            else
            {
                ModalService.show(ModalService.elem, scope);
            }
        });
    };

    ModalService.show = function(elem, scope)
    {
        $rootScope.$broadcast('$routeChangeSuccess');

        $compile(elem)(scope);
        elem.modal();

        elem.find(".btn-close").click(function() {
            elem.modal("hide");
            setTimeout(function() { elem.remove(); }, 500);
        });
    };

    return ModalService;
});

Answer 1

是的，它是可能的，并且所有需要的实用程序都已包含在角度中。我无法编写准备好的代码，但这里有一些能给你一个想法的东西：

将您的HTML代码加载到DOM中 - 类似于$('#myDiv').load('dialog.html')。不要将控制器绑定到ng-controller！保存对DOM节点的引用（让我们称之为element）。
加载您的控制器 - 可能是head.js或任何最适合您情况的控制器。保存对控制器功能的引用（controller是个好名字）。您不需要在角度应用程序中注册它，只需一个简单的全局函数。像往常一样参考任何所需的服务和范围：

function MyCtrl($scope, $resource, $http, $whatever, YourOwnService) {
    $scope.hello = 'world';
}

连线：

function ($compile, $rootScope, $inject) {
    var element = angular.element('#myDiv'),
        controller = MyCtrl;

    // We need new scope:
    var $scope = $rootScope.$new(true);

    // Compile our loaded DOM snippet and bind it to scope:
    $compile(element)($scope);

    $inject.invoke(controller, {
        $scope:$scope // you can add any other locals required by your controller
    });
}

我无法保证此代码按原样运行，但它描述了我几周前使用过的技术。但我必须提醒您，这不会允许您动态添加AngularJS依赖项：您的应用程序应该包含在引导应用程序之前添加的所有可能模块。

将控制器注入正在运行的Angular应用程序

1 个答案: