在工厂中访问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