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

如何创建html页面模板并使用AngularJS动态绑定控制器？

1 个答案: