当前位置: 首页 > 面试题库 >

如何将使用$ scope的函数包含/注入到angularjs的控制器中?

周龙光
2023-03-14
问题内容

我正在尝试将工厂中保存的函数库包含在控制器中。

我的 主控制器 如下所示:

recipeApp.controller('recipeController', function ($scope, groceryInterface, ...){

$scope.groceryList = [];
// ...etc...

/* trying to retrieve the functions here */
$scope.groceryFunc = groceryInterface; // would call ng-click="groceryFunc.addToList()" in main view
    /* Also tried this:
    $scope.addToList = groceryInterface.addToList();
    $scope.clearList = groceryInterface.clearList();
    $scope.add = groceryInterface.add();
    $scope.addUp = groceryInterface.addUp(); */
}

然后,在另一个.js文件中,我创建了工厂杂货接口。我已经将此工厂注入到上面的控制器中。

recipeApp.factory('groceryInterface', function(){

        var factory = {};

    factory.addToList = function(recipe){
        $scope.groceryList.push(recipe);
                    ... etc....
    }

    factory.clearList = function() {
            var last = $scope.prevIngredients.pop();
            .... etc...
    }

    factory.add = function() {
    $scope.ingredientsList[0].amount = $scope.ingredientsList[0].amount + 5;
    }

    factory.addUp = function(){
        etc...
    }

    return factory;
});

但是在我的控制台中,我一直在获取ReferenceError: $scope is not defined at Object.factory.addToList,等等。显然,我猜这与$scope我在工厂中的函数中使用的事实有关。我该如何解决?我注意到在我看过的许多其他示例中,没有人$scope在其外部工厂功能中使用过。我曾尝试$scope在工厂中将inject作为参数注入,但这种方法显然行不通。(例如recipeApp.factory('groceryInterface', function(){

任何帮助,我们都感激不尽!


问题答案:

您的工厂不在$scope同一范围内,因此您无法访问您的。

尝试以下方法:

recipeApp.controller('recipeController', function ($scope, groceryInterface) {

    $scope.addToList = groceryInterface.addToList;
    $scope.clearList = groceryInterface.clearList;
    $scope.add       = groceryInterface.add;
    $scope.addUp     = groceryInterface.addUp;
}

recipeApp.factory('groceryInterface', function () {

    var factory = {};

    factory.addToList = function (recipe) {
        this.groceryList.push(recipe);
    }

    factory.clearList = function() {
        var last = this.prevIngredients.pop();
    }
});

另外,您可以尝试使用一种更加面向对象的方法:

recipeApp.controller('recipeController', function ($scope, groceryInterface) {

    $scope.groceryFunc = new groceryInterface($scope);
}

recipeApp.factory('groceryInterface', function () {

    function Factory ($scope) {

        this.$scope = $scope;
    }

    Factory.prototype.addToList = function (recipe) {
        this.$scope.groceryList.push(recipe);
    }

    Factory.prototype.clearList = function() {
        var last = this.$scope.prevIngredients.pop();
    }

    return Factory;
});


 类似资料:
  • 问题内容: 我已经用AngularJS编写了一个服务,但是我无法使其与角度种子处理方式一起使用。 控制器代码如下: 请注意,注释掉的部分工作正常,但我想像(推荐的)第二种方式来处理它。 我得到的错误是照片是未定义的,所以我的猜测是我传递(注入)它的方法是错误的,但是我找不到正确的方法 问题答案: 您需要定义服务: 一些参考: http://docs.angularjs.org/api/angula

  • 问题内容: 我是Angular的新手,正在尝试弄清楚该怎么做… 使用AngularJS,如何注入要在另一个控制器中使用的控制器? 我有以下片段: 执行此操作时,出现错误: 我是否应该尝试在另一个控制器内部使用一个控制器,还是应该将此服务用作服务? 问题答案: 如果您打算掌握已经实例化的另一个组件的控制器,并且如果您遵循的是基于组件/指令的方法,则始终可以遵循某个层次结构的另一个组件中的控制器(一个

  • 问题内容: 正常使用案例 如果您有父指令和子指令,则可以在父指令的控制器中创建方法,并在子指令中需要父控制器。Angular会将父控制器传递到您的子指令链接函数中。 我的用例 我有一个用例,其中子指令是另一个指令的父指令。我在中间的指令要求的顶部有on指令。中间的指令是底部的最后一个指令所必需的。 在一个简单的世界中,我可以为中间指令创建一个链接方法和一个控制器。link方法使用顶部控制器处理所有

  • 问题内容: 我想在Chrome的JavaScript控制台中访问我的变量。我怎么做? 我既看不到控制台中的模块名称也看不到它的变量。 问题答案: 在开发人员工具的HTML面板中选择一个元素,然后在控制台中输入以下元素: 在WebKit和Firefox中,是对elements选项卡中所选DOM节点的引用,因此通过执行此操作,可以在控制台中打印出所选DOM节点范围。 您还可以按元素ID定位作用域,如下

  • 问题内容: 我需要在Angular js中的另一个控制器中调用函数。如何可能的方式请提前帮助我 代码: 问题答案: 控制器之间的通信通过+ / + 方法完成。 因此,在您的情况下,您想在Controller“Two”中调用Controller“One”的方法,执行此操作的正确方法是: 在被调用时,您可以发送任何数据作为第二个参数。

  • 我有一个围绕JavaFXML和scenebuilder构建的简单的两个选项卡应用程序。这些选项卡目前什么都不做,因为我在尝试加载它们时无法通过null指针异常。 java和fxml文件安排在一个Netbeans项目中,如下所示: 主应用程序:应用程序主类MainApp。java设置场景并声明如下: MainController类为应用程序声明了两个选项卡,输入选项卡和帐户选项卡,以及一个用于关闭程