Javascript 为什么angularjs控制器中相同类型函数的变量范围不同?

Javascript 为什么angularjs控制器中相同类型函数的变量范围不同?,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我添加了一个功能,可以添加和删除数据,并将它们作为对象推送。然而,一个将值移出函数范围,而另一个没有,我不明白为什么或者我遗漏了什么? 我能够收集$scope.projectDetails.allocateResourceInfo 简而言之,如何在AddProjectDetails函数中显示$scope.projectDetails.allocatePeopleInfo 我认为可能的原因:由于自动搜索,项目变为空,但我不知道,如果我在下一次搜索之前已经在数组中推送了该数据,它是如何在人员功能中首

我添加了一个功能,可以添加和删除数据,并将它们作为对象推送。然而,一个将值移出函数范围,而另一个没有,我不明白为什么或者我遗漏了什么? 我能够收集
$scope.projectDetails.allocateResourceInfo
简而言之,如何在
AddProjectDetails函数中显示
$scope.projectDetails.allocatePeopleInfo

我认为可能的原因:由于自动搜索,项目变为空,但我不知道,如果我在下一次搜索之前已经在数组中推送了该数据,它是如何在人员功能中首先丢失的,但仍保留在资源功能中的

controller.js

angular.module('myApp')
    .controller('addProjectCtrl', ['$http', '$scope', '$state', addProjectCtrl]);

function addProjectCtrl($http, $scope, $state, backendUrl, $auth) {
    var self = this;

    $scope.projectDetails = {};
    self.searchTextChange = searchTextChange;
    self.searchAllocatedResource = searchAllocatedResource;
    /* searchTextChange collects the text on the autofilter bar and gets the result from remote server everytime the text is changed */
    function searchTextChange(text) {
//autosuggest中的每个文本更改都会相应地给出结果集 },函数(错误){ 控制台日志(“错误”); }); }

    $scope.searchItemData = function(item) {
     // this code on select of a particular drop down gives the complete json object for that selected item. coz the item scope ends in md-autosearch, i just copied it to seatchItem so that I can bass the json data set for any use outside the md-auto-controller and use it furtehr

        $scope.searchItem = item;
        return item.name + " as " + item.designation + " 100%";
    };

    pushing the required search result I want in this new array in projectDetails, so that I can pass all at once

    $scope.projectDetails.allocatePeopleInfo = [];
    $scope.addAllocatePeople = function(item) {
        $scope.projectDetails.allocatePeopleInfo.push({
            imgpath: item.imageUrl,
            name: item.name,
            designation: item.designation,
            email: item.email,
            percentage: '80.5%'
        });
        self.searchText = "";
        console.log($scope.projectDetails.allocatePeopleInfo); // data shows up
    }
    $scope.removeAllocatePeople = function(rAR) {
        var index = $scope.projectDetails.allocatePeopleInfo.indexOf(rAR);
        $scope.projectDetails.allocatePeopleInfo.splice(index, 1);
    }

    $scope.projectDetails.allocateResourceInfo = [];
    $scope.addAllocateResource = function(item1, item2) {
        $scope.projectDetails.allocateResourceInfo.push({
            resourceTitle: item1,
            resourceLink: item2,
        });
        $scope.resourceName = "";
        $scope.resourceLink = "";
    }
    $scope.removeAllocateResource = function(rAR) {
        var index = $scope.projectDetails.allocateResourceInfo.indexOf(rAR);
        $scope.projectDetails.allocateResourceInfo.splice(index, 1);
    }

    $scope.AddProjectDetails = function() {
        console.log($scope.projectDetails.allocatePeopleInfo); // no data is added in this variable
        console.log($scope.projectDetails.allocateResourceInfo); // its shows the data

    }
}
自动完成html

<md-content layout-padding class=" padding-bottom-0" flex ng-controller="addProjectCtrl as ctrlAR">
            <md-input-contaner flex class="myclass" >
                <p class="overview_subheadings" style="margin-left:10px">Allocate People </p>

                <div layout="row">
                    <md-autocomplete
                            md-selected-item="ctrlAR.selectedItem"
                            md-search-text-change=""
                            md-search-text="ctrlAR.searchText"
                            md-selected-item-change="ctrlAR.selectedItemChange(item)"
                            md-items="item in ctrlAR.searchAllocatedResource(ctrlAR.searchText)"
                            md-item-text="searchItemData(item);"
                            md-min-length="0"
                            placeholder="Allocate People"
                            md-menu-class="autocomplete-custom-template" style="margin-top:7px; margin-left:10px"
                            ng-keyup="$event.keyCode == 13 ? addAllocatePeople(searchItem) : null" flex>
                        <md-item-template>
                            <div class="item-title">
                                <md-list-item class="md-2-line" style="height: 50px;min-height: 50px;">
                                    <img pdb-alt-img ng-src="{{item.imageUrl}}" class="md-avatar"
                                         alt="{{item.name}}" profile="peerCover" style="margin-top: 4px"/>

                                    <div class="md-list-item-text" layout="column">
                                        <h3>{{item.name}}</h3>

                                        <p>{{item.designation}}</p>
                                    </div>
                                </md-list-item>
                            </div>
                      <span class="item-metadata">
                        <span class="item-metastat">
                        </span>
                      </span>
                        </md-item-template>

                    </md-autocomplete>

                    <md-button class="md-icon-button" aria-label="More">
                        <md-icon md-font-library="material-icons"
                                 ng-click="addAllocatePeople(searchItem)" class="color-blue">add
                        </md-icon>
                    </md-button>
                </div>

            </md-input-contaner>

            <md-list style="margin-bottom:20px">
                <md-list-item class="md-3-line" ng-repeat="item in projectDetails.allocatePeopleInfo">
                    <img dir-alt-img ng-src="asdasd" class="md-avatar margin-23-top"
                         style="margin-top:5px"
                         dir-inverse="true" alt="{{item.name}}" profile="peerCover"/>

                    <div class="md-list-item-text" layout="column" flex="45">
                        <h4>{{item.name}}</h4>

                        <p>{{item.email}}</p>
                    </div>
                    <div class="md-list-item-text" layout="column" flex="40">
                        <h3>{{item.designation}}</h3>
                    </div>
                    <div class="md-list-item-text" layout="column" flex="10">
                        <h4><b>{{item.percentage}}</b></h4>
                    </div>
                    <div class="md-list-item-text" layout="column" flex="5">
                        <md-button class="md-icon-button" aria-label="More" flex>
                            <md-icon md-font-library="material-icons" class="close-font-color"
                                     style="margin-left:10px"
                                    ng-click="removeAllocatePeople(item)">close
                            </md-icon>
                        </md-button>
                    </div>
                    <md-divider></md-divider>
                </md-list-item>
            </md-list>
        </md-content>

**for resource data**


    <md-button class="md-icon-button" aria-label="More">
                                <md-icon md-font-library="material-icons"
                                         ng-click="addAllocateResource(val1,val2)" class="color-blue">add
                                </md-icon>
                            </md-button>

分配人员

{{item.name} {{item.designation}

    $scope.searchItemData = function(item) {
     // this code on select of a particular drop down gives the complete json object for that selected item. coz the item scope ends in md-autosearch, i just copied it to seatchItem so that I can bass the json data set for any use outside the md-auto-controller and use it furtehr

        $scope.searchItem = item;
        return item.name + " as " + item.designation + " 100%";
    };

    pushing the required search result I want in this new array in projectDetails, so that I can pass all at once

    $scope.projectDetails.allocatePeopleInfo = [];
    $scope.addAllocatePeople = function(item) {
        $scope.projectDetails.allocatePeopleInfo.push({
            imgpath: item.imageUrl,
            name: item.name,
            designation: item.designation,
            email: item.email,
            percentage: '80.5%'
        });
        self.searchText = "";
        console.log($scope.projectDetails.allocatePeopleInfo); // data shows up
    }
    $scope.removeAllocatePeople = function(rAR) {
        var index = $scope.projectDetails.allocatePeopleInfo.indexOf(rAR);
        $scope.projectDetails.allocatePeopleInfo.splice(index, 1);
    }

    $scope.projectDetails.allocateResourceInfo = [];
    $scope.addAllocateResource = function(item1, item2) {
        $scope.projectDetails.allocateResourceInfo.push({
            resourceTitle: item1,
            resourceLink: item2,
        });
        $scope.resourceName = "";
        $scope.resourceLink = "";
    }
    $scope.removeAllocateResource = function(rAR) {
        var index = $scope.projectDetails.allocateResourceInfo.indexOf(rAR);
        $scope.projectDetails.allocateResourceInfo.splice(index, 1);
    }

    $scope.AddProjectDetails = function() {
        console.log($scope.projectDetails.allocatePeopleInfo); // no data is added in this variable
        console.log($scope.projectDetails.allocateResourceInfo); // its shows the data

    }
}
添加 {{item.name} {{item.email}

    $scope.searchItemData = function(item) {
     // this code on select of a particular drop down gives the complete json object for that selected item. coz the item scope ends in md-autosearch, i just copied it to seatchItem so that I can bass the json data set for any use outside the md-auto-controller and use it furtehr

        $scope.searchItem = item;
        return item.name + " as " + item.designation + " 100%";
    };

    pushing the required search result I want in this new array in projectDetails, so that I can pass all at once

    $scope.projectDetails.allocatePeopleInfo = [];
    $scope.addAllocatePeople = function(item) {
        $scope.projectDetails.allocatePeopleInfo.push({
            imgpath: item.imageUrl,
            name: item.name,
            designation: item.designation,
            email: item.email,
            percentage: '80.5%'
        });
        self.searchText = "";
        console.log($scope.projectDetails.allocatePeopleInfo); // data shows up
    }
    $scope.removeAllocatePeople = function(rAR) {
        var index = $scope.projectDetails.allocatePeopleInfo.indexOf(rAR);
        $scope.projectDetails.allocatePeopleInfo.splice(index, 1);
    }

    $scope.projectDetails.allocateResourceInfo = [];
    $scope.addAllocateResource = function(item1, item2) {
        $scope.projectDetails.allocateResourceInfo.push({
            resourceTitle: item1,
            resourceLink: item2,
        });
        $scope.resourceName = "";
        $scope.resourceLink = "";
    }
    $scope.removeAllocateResource = function(rAR) {
        var index = $scope.projectDetails.allocateResourceInfo.indexOf(rAR);
        $scope.projectDetails.allocateResourceInfo.splice(index, 1);
    }

    $scope.AddProjectDetails = function() {
        console.log($scope.projectDetails.allocatePeopleInfo); // no data is added in this variable
        console.log($scope.projectDetails.allocateResourceInfo); // its shows the data

    }
}
{{item.designation} {{item.percentage} 关闭 **资源数据** 添加

参考资料:angular material auto complete

您如何调用这些函数?无法在控制器初始化中测试$scope变量,它将显示初始值。已编辑。。。但是,它可以很好地利用资源,但不能利用资源people@Azzi我在非外部的某个单击事件中调用。您可能未初始化“searchItem”(ng click=“addAllocatePeople(searchItem)”)如何修复此问题及其角度材质自动完成如何调用这些函数?无法在控制器初始化中测试$scope变量,它将显示初始值。已编辑。。。但是,它可以很好地利用资源,但不能利用资源people@Azzi我调用的某个单击事件不在外部..您可能未初始化“searchItem”(ng click=“addAllocatePeople(searchItem)”)如何修复此问题及其角度材质自动完成