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中选择选项时，它会转到相应的网址。并且所有链接/按钮都将正常工作。再次当我转到同一页面并选择另一个md-autocomplete选项时，它会重定向到相应的页面，但该页面中的链接/按钮不起作用。我无法从该页面移动。我的应用程序卡住了。

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-autocomplete引起的。这是一个已知的错误。问题：在选择项目后使用重定向时，将使用z-index：50将md-scroll-mask置于内容的顶部。这就是为什么你没有对下一页的任何控制 - 没有点击和滚动。

简单的css修复是添加

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

如果您想跟进官方修复，请参阅以下问题：https://github.com/angular/material/issues/3287

带有重定向的角度材料md-autocomplete

2 个答案: