Question

出于某种原因我的变量＆＃34; navitem.route＆＃34;当我尝试将它用作函数中的参数时，我不会在视图中显示。在生成的html中，变量显示为＆＃34; navitem.route＆＃34;而不是变量的值，但是当它在这些花括号之间的href中使用时，它会显示它应该。

在我的控制器中：

$scope.navitems = [
    {
        title: "Products",    
        route: "#/account/" + $window.sessionStorage.getItem('account') + "/products"
    },
    {
        title: "Settings",
        route: "#/account/" + $window.sessionStorage.getItem('account')
    }
];

$scope.isActive = function (viewLocation) {
    return viewLocation === $location.path();
};

在我看来：

<ul class="nav nav-pills nav-stacked">
    <li class="nav-item" data-ng-repeat="navitem in navitems">
        <a class="nav-link" href="{{navitem.route}}" data-ng-class="{ active: isActive(navitem.route)}" >{{navitem.title}}</a>
    </li>
</ul>

生成的html：

<ul class="nav nav-pills nav-stacked">
    <!-- ngRepeat: navitem in navitems -->
    <li class="nav-item ng-scope" data-ng-repeat="navitem in navitems">
        <a class="nav-link ng-binding" href="#/account/2/products" data-ng-class="{ active: isActive(navitem.route)}">Products</a>
    </li>
    <!-- end ngRepeat: navitem in navitems -->
    <li class="nav-item ng-scope" data-ng-repeat="navitem in navitems">
            <a class="nav-link ng-binding" href="#/account/2" data-ng-class="{ active: isActive(navitem.route)}">Settings</a>
    </li>
    <!-- end ngRepeat: navitem in navitems -->
</ul>

我如何使用＆＃34; navitem.route＆＃34;函数中的值？

提前致谢，

Answer 1

您需要使用ng-href，如下所示：

<ul class="nav nav-pills nav-stacked">
    <li class="nav-item" data-ng-repeat="navitem in navitems">
        <a class="nav-link" ng-href="{{navitem.route}}" data-ng-class="{ active: isActive(navitem.route)}" >{{navitem.title}}</a>
    </li>
</ul>

Answer 2

navitem.route值以＃开头。 location.path（）返回的url没有＃。所以isActive（）永远不会返回true。从路线中删除＃。

控制器：

$scope.navitems = [
{
    title: "Products",    
    route: "/account/" + $window.sessionStorage.getItem('account') + "/products"
},
{
    title: "Settings",
    route: "/account/" + $window.sessionStorage.getItem('account')
}
];

在视图中使用ngHref而不是href：

<a class="nav-link" ng-href="#/{{navitem.route}}" data-ng-class="{ active: isActive(navitem.route)}" >{{navitem.title}}</a>

AngularJs变量不在视图中显示

2 个答案: