Angular指令方法綁定ng-select

當我改變一個select時，它會觸發其他使用相同指令的選擇的所有方法綁定。這是預期的行爲？例如，如果我改變狀態選擇，它會觸發選中的狀態，也會選擇狗。我錯過了對Angular Directives的基本理解？我注意到如果我沒有指示就這樣做，這不是行爲。Angular指令方法綁定ng-select

這裏是我的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>

來源

2014-02-11 Maccurt

看起來你正在尋找的ngChange指令不ngSelected。嘗試修改您的指令模板是：

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

現在你會發現，當你ngModel的值被改變了你的函數被調用。如果要在<option>元素上使用ngRepeat指令（而不是使用ngOptions），則可以在<option>元素上的ngSelected中表達一個表達式，該元素將用於確定當前選中哪個選項。

ngSelected發生這種情況的原因是因爲該指令期望表達式進行評估。你傳遞了一個函數（這非常好），所以無論何時你要更新<select>中的選擇，它都會強制一個Angular digest循環（因爲你的ngModel正在被更改）。它最終會達到您的ng-selected="itemselected()"表達式，並嘗試通過執行它來對其進行評估。

來源

2014-02-11 18:58:04 DRiFTy

我確實嘗試使用ng-changed，並且我注意到它在事件實際更改之前觸發了事件。我感謝你的迴應，因爲它讓我可以查看和了解這個摘要。我認爲有更好的方法來做到這一點與$ watch，但我雖然這個簡單的解決方案將工作.. – Maccurt

Angular指令方法綁定ng-select

回答

相關問題