web-dev-qa-db-ja.com

angularマテリアルでmd-selectを使用して関数を実行できますか？

奇妙なエラーが発生していますが、md-selectを誤って使用している可能性があります。 ng-selectedオプションに基づいて、新しいページに移動するか、サインアウトしようとしています。残念ながら、私はこのエラーを受け取っています：

Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

html：

<md-select placeholder="DISRUPTIVE" ng-model="activePage" ng-change="changeSelected()">
   <md-option value="settings">Settings</md-option>
   <md-option value="logout">Sign Out</md-option>
 </md-select>

コントローラ：

$scope.changeSelected = function(){
      switch ($scope.activePage) {
      case "settings":
        $location.path( '/account');
        break;
      case "logout":
        $scope.logout();
        break;
    }

    };

選択したページに移動するかログアウトした後、エラーが表示されます。 md-selectをこの方法で使用できませんか？

編集：md-selectを終了させずにページを離れることに何らかの関係があります。 $ timeoutを追加すると機能します。それは理想的ではありませんが、少なくとも私は前進することができます：

$scope.changeSelected = function(){
      $timeout(function() {
        switch ($scope.activePage) {
        case "settings":
          $location.path( '/account');
          break;
        case "logout":
          Auth.logout();
          break;
      }
    }, 1000);
javascriptangularjsangular-material
9
EmptyPockets

Selectの変更をリッスンするには、ng-changeディレクティブを追加するだけです。この簡単な例を確認してください

<div ng-app="selectDemoBasic" ng-controller="AppCtrl" layout="column" layout-align="center center" style="min-height: 300px;">
  <md-select placeholder="Pick" ng-model="someVal" ng-change="selectChanged()">
    <md-option value="1">One</md-option>
    <md-option value="2">Two</md-option>
  </md-select>
</div>

js部分

angular.module('selectDemoBasic', ['ngMaterial']).controller('AppCtrl', function($scope) {
  $scope.selectChanged = function(){
    alert("value changed-->"+$scope.someVal);
    if ($scope.someVal==1){
      $scope.otherFunction();
    }
  };

  $scope.otherFunction = function(){
    alert("in the other function");
  };
});

http://codepen.io/Eylen/pen/dobbqg/

15
Eylen