javascript - $scope 缺少选择绑定(bind)的成员

Question

$scope 似乎缺少文本框预输入和选择列表的绑定(bind)属性。 这是一个显示我想要的行为的 fiddle :http://jsfiddle.net/langtonr/h4MKa/1/ 您可以根据需要添加和删除销售人员。 $scope 正确绑定(bind)到 $scope.salesmanEntry (在输入中选择的销售员)和 $scope.selectedSalesmen (已在列表框中选择的销售员)。

我已将相同的代码复制并粘贴到我的项目中，但它不起作用。我正在使用所有相同的库引用。看来范围不适用于这两个变量。 $scope.salesmanEntry 和 $scope.selectedSalesmen 始终未定义。我的完整 Controller 代码如下。什么可能会干扰我的 $scope？

我在我的 View 中输出以下内容:

<div>{{salesmanEntry.id}} {{salesmanEntry.displayName}}</div>

我的 View 始终正确显示这些内容，因此当我输入推销员时，它会显示出来，但当我进入 Controller 代码时， $scope.salesmanEntry 始终未定义。它与 $scope.selectedSalesmen 表现出相同的行为。我可以通过在 selectedSalesmen 上使用 ng-repeat 来输出到屏幕，但在我的 Controller 中 $scope.selectedSalesmen 始终未定义。

manageProductsModule.controller('productDetailCtrl', [
    'productSvc', 'equipmentOptionSvc', 'salesmanSvc', '$scope', function (productSvc, equipmentOptionSvc, salesmanSvc, $scope) {
        $scope.loadingProduct = false;
        $scope.product = {
            secureUsers: [],
            options: [],
            priceHistory: []
        };
        $scope.addedSalesmen = [];
        $scope.allSalesmen = [
    { id: 1, displayName: "Smith, John" },
    { id: 2, displayName: "Ramsey, Gordon" },
    { id: 3, displayName: "White, Betty" }];

        $scope.addSalesman = function (salesman) {
            if (!salesman.id) return;
            var result = $.grep($scope.addedSalesmen, function (e) { return e.id == salesman.id; });
            if (result.length === 0) {
                $scope.addedSalesmen.push(salesman);
            }
            $scope.salesmanEntry = { id: -1, displayName: "" };
        };

        $scope.removeSalesmen = function () {
            $scope.selectedSalesmen.forEach(function (salesman) {
                var index = $scope.addedSalesmen.indexOf(salesman);
                $scope.addedSalesmen.splice(index, 1);
            });
            $scope.selectedSalesmen = [];
        }
    }
]);

模板:

<div ng-app="manageProductsModule">
    <div class="container" ng-controller="productDetailCtrl">
        <h3>Model Details</h3>
        <form class="form-horizontal" role="form" ng-if="!loadingProduct">
            <div class="form-group">
                <label for="addSalesmenInput" class="control-label col-md-2">Add</label>
                <div class="col-md-4">
                    <div class="input-group">
                        <input name="addSalesmenInput" 
                               class="form-control" 
                               ng-model="salesmanEntry" 
                               typeahead="salesman as salesman.displayName for salesman in allSalesmen | filter:$viewValue" />
                        <div class="input-group-btn">
                            <button class="btn" ng-click="addSalesman(salesmanEntry)" ng-disabled="!salesmanEntry">
                                <i class="glyphicon glyphicon-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="salesmenInput" class="control-label col-md-2">Salesmen With Access</label>
                <div class="col-md-4">
                    <select name="salesmenInput" multiple="multiple" size="8" class="form-control" ng-model="selectedSalesmen" ng-options="salesman as salesman.displayName for salesman in addedSalesmen"></select>
                    <button class="btn" ng-click="removeSalesmen()" ng-disabled="!selectedSalesmen || selectedSalesmen.length === 0">
                        <i class="glyphicon glyphicon-minus"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 1

所以这就是我必须做的事情才能让它发挥作用。我绝对对这个看起来非常老套的解决方案不满意，并且想知道为什么这是必要的。我必须转到 $scope.$$childHead 来访问 salesmanEntry 和 selectedSalesmen，因为它们显然存储在错误的范围中。

    $scope.addSalesman = function (salesman) {
        if (!salesman.id) return;
        var result = $.grep($scope.addedSalesmen, function (e) { return e.id == salesman.id; });
        if (result.length === 0) {
            $scope.addedSalesmen.push(salesman);
        }
        $scope.$$childHead.salesmanEntry = { id: -1, displayName: "" };
    };

    $scope.removeSalesmen = function () {
        $scope.$$childHead.selectedSalesmen.forEach(function (salesman) {
            var index = $scope.addedSalesmen.indexOf(salesman);
            $scope.addedSalesmen.splice(index, 1);
        });
        $scope.$$childHead.selectedSalesmen = [];
    }