带重定向的角度材质md自动完成

Question

我们集成了md自动完成功能。但我们的要求是，在从md autocomplete中选择任何值后，是否可以重定向到相应的页面？

<md-autocomplete
        ng-disabled="isDisabled"
        md-no-cache="noCache"
        md-selected-item="selectedItem"
        md-search-text-change="searchTextChange(searchText)"
        md-search-text="searchText"
        md-selected-item-change="selectedItemChange(item)"
        md-items="item in querySearch(searchText)"
        md-item-text="item.name"
        md-min-length="0"
        placeholder="Search"
        md-menu-class="autocomplete-custom-template">
        <md-item-template>
          <span class="item-title">
            <!--<md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>-->
            <span> {{item.name}} </span>
          </span>
        </md-item-template>
    </md-autocomplete>

我把函数写如下：

function selectedItemChange(item) {
        $log.info('Item changed to ' + JSON.stringify(item));
        if(item.key == 'doctor'){
            $location.path('/patient/account');
        }
        else if(item.key == 'speciality'){
            $location.path('/patient/account');
        }
    }

它重定向到指定的页面，但应用程序卡在该页面上。该页面将无法正常工作。

但当我尝试跟随时，它会完美地工作。

<div ng-click="testclick()">test</div>
$scope.testclick = function(){
    $location.path('/patient/account');
}

当我从md autocomplete中选择选项时，它将转到相应的url。所有链接/按钮将正常工作。同样，当我转到同一页面并选择另一个md自动完成选项时，它会重定向到相应的页面，但该页面中的链接/按钮不起作用。我无法从那个页面移动。我的应用程序被卡住了。

Answer 1

您需要在路由器中指定页面及其控制器。在你的路由控制js文件中有这样的东西。

 $stateProvider
      .state('root', {
        onEnter: function() {
          //your function you want to trigger
        },
        views: {
          '': {
            templateUrl: 'scripts/base/layout.html',
            controller: 'AppController'
          },
          'somepage@root': {
            templateUrl: 'scripts/base/somepage.html',
            controller: 'NewPageController'
          }
        },
      })

Answer 2

您的问题是由Angular Material md自动完成引起的。这是一个已知的错误。问题：当在选择项目后使用重定向时，会有一个md滚动掩码位于内容顶部，z索引为50。这就是为什么你无法控制下一页——没有点击和滚动。

一个简单的css修复是添加

.md-scroll-mask { position: initial;}

如果你想跟进官方修复，以下是悬而未决的问题：https://github.com/angular/material/issues/3287