Question

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

我复制并粘贴到我的项目中的相同代码并不起作用。我正在使用所有相同的库引用。似乎范围对这两个变量不起作用。 $ scope.salesmanEntry和$ scope.selectedSalesmen始终未定义。我的完整控制器代码如下。什么可能干扰我的$ scope？

我在我的观点中输出以下内容：

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

我的视图总是正确地显示这些，所以当我输入一个推销员时，它会显示出来，但是当我到达我的控制器代码时，$ scope.salesmanEntry总是未定义的。它与$ scope.selectedSalesmen表现出相同的行为。我可以通过在selectedSalesmen上使用ng-repeat输出到屏幕，但在我的控制器中，$ 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

所以这就是我必须做的才能让它发挥作用。我绝对不满意看起来像是一个非常hacky的解决方案，并想知道为什么这是必要的。我不得不去$ 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 = [];
    }

$ scope缺少选择绑定的成员

1 个答案: