如何創建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