1

我编写了一些简单的代码来允许引导模式与角度一起工作，因为它在单击时将链接加载到模式中。现在有问题的链接有自己的角度控制器，这些控制器包含在它们的源代码中。当模态被加载时，我首先使用 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;
});
4

1 回答 1

0

是的，这是可能的，并且所有需要的实用程序都已包含在 angular. 我无法编写现成的代码，但这里有一些东西会给你一个想法：

  1. 将您的 HTML 代码加载到 DOM 中——比如$('#myDiv').load('dialog.html'). 不要将控制器与ng-controller! 保存对 DOM 节点的引用（我们称之为element）。

  2. 加载您的控制器 - 可能使用head.js或最适合您情况的任何内容。保存对控制器函数的引用（controller是个好名字）。您无需在 Angular 应用程序中注册它，只需一个简单的全局函数即可。像往常一样引用任何所需的服务和范围：

function MyCtrl($scope, $resource, $http, $whatever, YourOwnService) {
    $scope.hello = 'world';
}
  1. 接线：
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 依赖项：您的应用程序应该包括在引导应用程序之前添加的所有可能的模块。

于 2013-05-11T12:33:24.940 回答