angularjs - angular-ui-router 动态菜单：TypeError：渲染菜单时无法调用未定义的方法“匹配”

Question

我是 angular 和 angular-ui-router 的新手，并试图创建一个菜单。我尝试了 angular-ui-router 并认为它适合我的需求。现在我在使用 ui-router 属性创建菜单时遇到问题。

我的 html 代码如下所示：

<div ng-controller="MenuCtrl">
    <ul>
        <li ng-repeat="item in menu">
            <a ui-sref="cf.{{item}}">{{item}}</a>
        </li>
    </ul>
</div>

如果用户登录，菜单数组包含不同的条目，具体取决于信息。

现在我收到此错误消息：

TypeError: Cannot call method 'match' of undefined
<a ui-sref="cf.{{item}}" class="ng-binding">

看起来 ui-router 在使用 ng-repeat 完成渲染之前尝试访问列表条目。

我能做些什么来防止这个问题？

Answer 1

所以 ui-router 不支持 ui-sref 中的插值，相信我，我希望他们会。这是我解决这个问题的方法。

在您的控制器中：

app.controller("MenuCtrl", ['$scope', '$state', function($scope, $state) {
    $scope.$state = $state;
}]);

在您的观点中，使用 ng-href 来评估我们现在添加到 $scope 中的 $state 对象：

<div ng-controller="MenuCtrl">
    <ul>
        <li ng-repeat="item in menu">
            <a ng-href={{ $state.href('cf.' + item) }}>{{item}}</a>
        </li>
    </ul>
</div>

您也可以将这种技术用于通配符参数：

ng-href="{{ $state.href('cf.items.item', {'item' : item} ) }}"

假设您已经为此正确设置了 ui-router 路由。