Question

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

用户选择一个项目。（通过调用我的API在页面加载时填充）。
当用户选择项目时，会触发一个函数来创建另一个项目调用我的API以填充我的任务下拉菜单。
用户选择要修改的任务。

目前我遇到第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>

控制器：

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中引用控制器，例如ng-controller="Controller as ctrl" ng-change="ctrl.projectIDSelected()"，或者您需要将projectIDSelected定义为$scope.projectIDSelected = function() { ... }

我无法看到控制器的外观，但使用$scope时需要在定义控制器时注入它：angular.module('app').controller('Controller', ['$scope', function($scope) { ... }]);

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

用户进行下拉菜单选择时触发功能

1 个答案: