javascript - 当用户选择下拉菜单时触发函数

Question

我正在开发一个项目管理应用程序。每个项目都有一个与其关联的任务列表。我目前正在尝试使修改任务页面正常工作。这个想法是:

1. 用户选择一个项目。(通过调用我的 API 在页面加载时填充)。

2. 当用户选择项目时，会触发一个函数来创建另一个项目调用我的 API 以填充我的任务下拉菜单。

3. 用户选择要修改的任务。

目前我在执行第 2 步时遇到问题。

我的代码:

HTML:

Project(Has ng-change directive)

<select class="form-control"  name="projectID" id="projectID"
        ng-options="project.projectName for project in dbProjects"
        ng-model="projectID"
        ng-change ="projectIDSelected()" 
         required>

Tasks(What I want populated from the projectIDSelected() function)

<select class="form-control"  name="taskName" id="taskName"
            ng-options="task.name for task in dbTasks"
            ng-model="taskName"
            required>

Controller :

this.projectIDSelected = function(){
     console.log("project id selected function has fired.");
     TaskApi.GetProjectTasks(
            {
                params: {
                    projectId: $scope.projectID.id,
                }
            },
            function(res){
                console.log("Tasks for ProjectId retrived");
                console.log(res);
                $scope.dbTasks = res.data;
            },
            //handle failure
                function(res){
                    console.log(res);

            }
      )
 }

问题是projectIDSelected函数永远不会触发，因此$scope.dbTasks永远不会获取数据，因此前端的下拉菜单保持空白。

Answer 1

this 不引用 $scope

因此，您必须在 html 中引用 Controller ，例如 ng-controller="Controller as ctrl" ng-change="ctrl.projectIDSelected()" 或您需要将 projectIDSelected 定义为 $scope.projectIDSelected = function() { ... }

我无法看到您的 Controller 是什么样子，但要使用 $scope 您需要在定义 Controller 时注入(inject)它:angular.module('app') .controller('Controller', ['$scope', function($scope) { ... }]);

就个人而言，当我在 Controller 中创建变量和函数时，我倾向于使用 $scope 来定义将在 HTML 上使用的内容，并使用 this 作为后台函数/数据过于具体，无法作为服务