在工廠中訪問AngularJS指令范圍

Question

我正在運行Angular 1.4.3。

我正在嘗試創建一個有角度的“工廠”，以幫助我在應用程序中創建一個通用菜單系統。 'gui'工廠的'create'功能創建一個ul，而ng-click可單擊li元素。

此ul附加到文檔主體。

ng-click應該在我的工廠中執行“ callMe”功能，但是我不確定要使用什么范圍。

碼：

var App = angular.module('App', ['ngRoute']);

App.factory('gui', function() {

    var menu = function {
        "create" : function(){
            var menu_container = $('<div id="menu"></div>');
            var menu_ul = $('<ul></ul>');
            menu_ul.append('<li class="menu-item-purple" ng-click="gui.menu.callMe()"><a>About <span style="float: right;">&gt;</span></a></li>');
            menu_container.append( menu_ul );
            menu_container.prependTo(document.body);
        },
        "callMe" : function(){
            console.log("I HAVE BEEN HIT");
        }
    }
    return {
        "menu" : menu
    };
})
.controller('ExampleController', function($scope, gui){
    $scope.gui = gui;
    gui.menu.create();
})

所以在上面的代碼中，當我單擊li菜單按鈕時-我沒有得到任何響應。

我在li元素中嘗試了以下方法：

ng-click="this.callMe()"

我認為原始版本應該可以工作，因為如果我使用ng-click指令將html硬編碼到視圖中，則可以正常工作。 我認為這可能與加載順序有關，因為gui.menu對象應該在控制器范圍內傳遞時出現在視圖中？

Answer 1

由於您的工廠實際上涉及某些DOM操作，因此建議您定義一個偽指令 。

您可以在指令模板中定義ul和li元素，還可以處理ng-click事件。 指令是共享某些DOM結構以及跨應用程序不同位置的邏輯的最佳選擇。

Answer 2

要訪問模板中工廠中包含的方法，您需要將“ this”變量更改為gui ，這是因為您的方法包含在作用域內名為gui的變量中。

雖然，在您的作用域內為要執行的操作創建函數可能會更容易。

$scope.createMenu = function () { gui.menu.create(); };

然后，您可以直接在模板中使用

ng-click="createMenu()"

但是，正如@Joy所說，使用指令會更好，因為修改了DOM