Question

我正在尝试开发一个带有angularjs＆amp;的友好对话插件。自举。

我发现基于指令的对话框不是那么容易使用，首先添加一个html标签并定义控制器和变量，这太复杂了。

所以我打算在angular中添加一个方法，创建新的元素动态并将变量设置为根范围，但是编译时似乎存在一些问题。

这里主要是代码：

var defaultOption = {
    title: 'Title',
    content: 'Content',
    backdrop: false,
    buttons: [],
    $dom: null
};

var prefix = '__dialog',
    index = 0;
var newId = function (scope) {
    var id = prefix + index;
    if (!scope[id]) return id;
    index++;
    return arguments.callee(scope);
};

var app = angular.module("app", []);
app.directive('bootstrapModal', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            bootstrapModal: '='
        },
        link: function (scope, $ele) {
            var $dom = $(defaultTemplate),
                body = $ele.children();

            if (body.length) $dom.find('.modal-body').html(body);

            $ele.replaceWith($dom);
            $compile($dom)(scope);

            scope.bootstrapModal.$dom = $dom;
        }
    };
}]);

angular.ui = {};
angular.ui.dialog = function (args) {
    var $body = angular.element(document.body),
        $rootScope = $body.scope().$root,
        option = $.extend({}, defaultOption, args);

    option.id = option.id || newId($rootScope);

    option.show = function () {
        this.$dom.modal('show');
    };

    option.hide = function () {
        this.$dom.modal('hide');
    };

    $body.injector().invoke(function ($compile) {            
        $rootScope[option.id] = option;
        var dialog = '<div bootstrap-modal="{0}"></<div>'.format(option.id);            
        var html = $compile(dialog)($rootScope);
        $('body').append(html);
    });

    return option;
};
$(function () {
    angular.ui.dialog({ //test
        title: 'Alert',
        content: 'test content for alert',
        buttons: [{
            name: 'Close',
            focus: true
        }]
    }).show();
});

整个代码太长了，所以我把它放在JSFIDDLE

中

谢谢！

Answer 1

在代码中放置$rootScope.$apply(function() { ... })，在injector().invoke(...)。

中编译对话框

Updated fiddle

如何在angularjs中使用带有new元素的$ compile

1 个答案: