ng-change breaking angular material dropdown with Uncaught TypeError: Cannot read property '$$ngAnimateParentKey' of null

Question

我正在将 angular material 添加到我的网站。我能够运行以下没有任何问题：

<md-input-container class="md-block" flex-gt-sm>
    <label>Package</label>
    <md-select ng-model="vm.search.parameters.package">
        <md-option ng-repeat="package in vm.packages.list" value="{{package.id}}">
            {{package.name}}
        </md-option>
    </md-select>
</md-input-container>

但是我需要在更改时触发一个函数，所以我需要像这样添加一个 ng-change：

<md-input-container class="md-block" flex-gt-sm>
    <label>Package</label>
    <md-select ng-model="vm.search.parameters.package" ng-change="vm.updatePhotographersList()">
        <md-option ng-repeat="package in vm.packages.list" value="{{package.id}}">
            {{package.name}}
        </md-option>
    </md-select>
</md-input-container>

它第一次工作，甚至运行函数和 returns 正确的数据，但它不允许我再次从下拉列表和控制台中 select显示以下错误：

Uncaught TypeError: Cannot read property '$$ngAnimateParentKey' of null

我试过向元素添加 ng-click，如下所示：

<md-input-container class="md-block" flex-gt-sm>
    <label>Package</label>
    <md-select ng-model="vm.search.parameters.package">
        <md-option ng-repeat="package in vm.packages.list" value="{{package.id}}" ng-click="vm.updatePhotographersList()">
            {{package.name}}
        </md-option>
    </md-select>
</md-input-container>

但是这些不会在正确的时间触发（似乎函数在 ng-model 更新之前触发）。是什么导致了这个错误，我该如何解决？

这是我的依赖项：

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.min.js"></script>

Answer 1

这根本不是 ng-animate 的问题。问题是我的 ui-router 触发了重新加载。我仍然不确定为什么会导致问题，但这是修复它的更改。我已更改：

    $state.transitionTo($state.current.name, newStateParameters);

至：

    $state.transitionTo($state.current.name, newStateParameters, {notify: false});

ng-change breaking angular material dropdown with Uncaught TypeError: Cannot read property '$$ngAnimateParentKey' of null

ng-change breaking angular material dropdown with Uncaught TypeError: Cannot read property '$$ngAnimateParentKey' of null

javascript

angularjs

ng-animate

angular-material