Question

我想在点击我的菜单的菜单项时加载页面，但状态会反映到我的浏览器URL中，并且该页面的内容无法加载，只要我学习了教程状态只是这样声明，我的代码也没有向我显示任何错误。

这是我的route.js文件

app.config(function config($stateProvider)
{
    $stateProvider.state("index",{
        url:"",
        controller:"MainCtrl",
        templateUrl:"templates/home/home.html"
    }),
        $stateProvider.state("development",{
            controller:"EmployeeCtrl",
            templateUrl:"templates/employee/employee.html"
        });

})

这是我在主页上的列表，其中href我已声明状态，我的索引状态工作正常。

 <ul class="nav navbar-nav">
                <li class="active"><a href="#/development">Development</a></li>
                <li><a href="#/design">Design</a></li>
                <li><a href="#/exercise">Exercise</a></li>
                <li><a href="#/humor">Humor</a></li>
            </ul>

以下是我希望在完成开发状态时显示其内容的页面employee.html的代码。

<div>
    <input type="text" ng-model="searchText">
    <table>
        <tr ng-repeat="emp in employee.data | filter:searchText"></tr>
        <td>{{emp.firstname}}</td>
        <td>{{emp.lastname}}</td>
    </table>
</div>

Answer 1

状态应根据其网址进行区分，因此您需要在您的州中添加url参数，url: '/development',状态应为development，以便在网址发生变化时浏览器将通过$stateProvider进行检测，然后加载指定的controller＆amp; template由州定义。

<强>代码

$stateProvider.state("development",{
    url: '/development',
    controller:"EmployeeCtrl",
    templateUrl:"templates/employee/employee.html"
});

您还应该使用ui-sref指令来确保您的href已正确创建。您只需要在stateName中指定ui-sref，它将从状态url呈现值，例如ui-sref="development" href="#/development"

Answer 2

使用ui-sref进行状态路由。做：

<ul class="nav navbar-nav">
    <li class="active"><a ui-sref="development">Development</a></li>
    <li><a ui-sref="design">Design</a></li>
    <li><a ui-sref="exercise">Exercise</a></li>
    <li><a ui-sref="humor">Humor</a></li>
</ul>

在角度js中使用$ stateProvider进行路由时，尝试使用状态路由时页面不会加载

2 个答案: