Angular 指令方法绑定 ng-select

Question

当我更改一个选择时，它会触发使用相同指令的其他选择的所有方法绑定。这是预期的行为吗？例如，如果我更改状态选择，它将触发 stateselected 和 dogselected..我是否缺少对 Angular 指令的基本理解？我注意到如果我在没有指令的情况下这样做，这不是行为。

这是我的 plunkr：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 的值发生更改时，您的函数会被调用。如果您要在<option> 元素上使用ngRepeat 指令（而不是使用ngOptions），您将能够在ngSelected 中的ngSelected 元素上放置一个表达式，用于确定哪个当前已选择选项。

ngSelected 发生这种情况的原因是该指令期望表达式进行评估。您向它传递了一个函数（这非常好），因此每当您更新 <select> 中的选择时，它都会强制执行 Angular 摘要循环（因为您的 ngModel 正在更改）。它最终会到达您的 ng-selected="itemselected()" 表达式并尝试通过执行它来评估它。