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操作，我建议您定义directive。

您可以在指令模板中定义ul，li元素，并处理ng-click事件。指令是共享某些DOM结构以及应用程序中不同位置的逻辑的最佳选择。

Answer 2

要在模板中访问工厂中包含的方法，您需要将'this'变量更改为gui ，这是因为您的方法包含在范围内名为gui的变量中。 / p>

尽管如此，在你想要做的事情的范围内创建一个函数可能会更容易。

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

然后，您可以使用

直接在模板中调用该函数

ng-click="createMenu()"

但是，正如@Joy所说，自从你的DOM被修改后，使用指令会更好

Angularjs指令范围在工厂中访问

2 个答案: