Question

当我更改一个select时，它会触发所有使用相同指令的其他选择的方法绑定。这是预期的行为吗？例如，如果我改变状态选择，它将触发状态选择并且也选择了狗。我错过了对Angular Directives的基本理解？我注意到如果我没有指令就这样做，这不是行为。

这是我的傻瓜：http://plnkr.co/edit/inKtjY?p=preview

var app = angular.module('app', []);

    app.controller('controller', function ($scope) {

        $scope.firstName = "Michael";

        $scope.states = [{ id: 1, name: 'Nebraska' }, { id: 2, name: 'Iowa' }];
        $scope.state = $scope.states[0];
        $scope.stateselected = function (state) {

            console.log('state selected:', state);
        };


        $scope.dogs = [{ id: 11, name: 'Poodle' }, { id: 12, name: 'Pitbull' }];
        $scope.dog = $scope.dogs[0];
        $scope.dogselected = function (dog) {

            console.log('dog selected:', dog);
        };
    });

    app.directive('myselect', function () {

        return {
            restrict: 'E',
            template: '<select ng-model="item" ng-options="i as i.name for i in itemlist " ng-selected="itemselected()"></select>',
            scope: {
                item: '=',
                itemlist: '=',
                itemselected: '&'
            }
        };
    });

HTML

<div ng-controller="controller">

    State:<myselect item='state' itemlist='states' itemselected='stateselected(state)'></myselect><br>

    Dogs: <myselect item='dog' itemlist='dogs' itemselected='dogselected(dog)'></myselect><br>

</div>

Answer 1

看起来您正在寻找ngChange指令而不是ngSelected。尝试将指令模板修改为：

<select ng-model="item" ng-options="i as i.name for i in itemlist" ng-change="itemselected()"></select>

现在您将注意到，当ngModel的值发生变化时，系统会调用您的函数。如果您要在ngRepeat元素上使用<option>指令（而不是使用ngOptions），则可以在ngSelected上的<option>中添加表达式ngSelected } element，用于确定当前选择的选项。

<select>发生这种情况的原因是因为该指令期望表达式进行评估。你传递了一个函数（完全没问题），所以每当你更新ngModel中的选择时，它都会强制一个Angular摘要循环（因为你的ng-selected="itemselected()"被更改了）。它最终会到达您的{{1}}表达式并尝试通过执行它来评估它。

角度指令方法绑定ng-select

1 个答案: