如何创建html页面模板并将控制器与AngularJS动态绑定到它？

Question

我需要创建html模板并将相应的控制器动态绑定到它。

我该如何使用AngularJS？

我可以使用$ compile服务创建动态模板，但是我不知道如何以有效且优雅的方式将控制器绑定到该模板。

细节。

我想创建一个弹出菜单。 我使用onPopupShowEventHandler(event, data)方法提供了服务。 此方法将创建具有某些行为的简单html代码，并将其插入我的主要html代码的主体中。 我从外面得到的行为。 而确切的行为取决于情况。

因此，现在我可以使用$ compile服务创建一段html代码，但是我想将一个控制器放入此html代码的ng-controller部分中。 我不知道该怎么做...

码。

onPopupShowEventHandler = function(event, data) {

        var menuItems = data.popupMenuItems; // I want this elements to be accessible in 'element'

        pair = data.pair;

        var element =   '<div id="popup" style=\"' + menuStyle + '\">'+
                        '<ul>'+
                        '<li ng-repeat="item in menuItems"><a href="" ng-click="delegateInvoker($index)">{{item.name}}</a></li>'+
                        '</ul>'+
                        '</div>';

        element = angular.element(element);

        var overlayCSS = {
            left: data.clientX + offset.left + 'px',
            top: data.clientY + offset.top + 'px',
            display: 'block'
        };

            var compiled = $compile(element)($rootScope);
            compiled.css(overlayCSS);
            var body = angular.element('body');
            body.append(compiled);
};

谢谢。

Answer 1

您可以尝试制作指令，然后将控制器绑定到该指令，然后将该指令作为属性放入模板中。请检查此链接http://www.bennadel.com/blog/2603-directive-controller-and-link-timing- in-angularjs.htm