Question

我对Angular很新，使用ui-router非常新，所以我可能会遗漏一些明显的东西。

如果我自己启动了results.html页面，那么Web API中的所有内容都会通过控制器正确绑定，并按预期显示。

当我从index.html开始并单击调用$ state.go（）的按钮时，我将导航到results.html页面..但是控制器中没有任何数据显示出来。控制器＆amp;虽然服务仍然被调用 - 因为我把console.log（）语句用来验证我想要的对象是在$ state.go（）之后返回的，并且它是 - 模板只是没有注册它。

这是我的ui-router和主控制器的代码：

// script.js
var app = angular.module('BN', ['ui.router']);

// configure our routes
app.config(function ($locationProvider, $stateProvider, $urlRouterProvider)     {

    $urlRouterProvider.otherwise('');

$stateProvider

    .state('default',{
        url:'/',
        templateURL:'index.html',
        controller: 'MainController'
    })

    .state('results', {
        url:'/results',
        controller: 'ResultsController',
                controllerAs: 'vm',
                templateUrl: 'Results/Results.html'
    })

    .state('instructor', {
        url:'/api/instructors/:id',
        templateUrl: 'Instructors/Instructor.html'
    });

$locationProvider.html5Mode(true);
});

app.controller('MainController', MainController);
function MainController ($state) {

var vm = this;

vm.Submit=function( ){
    $state.go('results');    
};
}

所以Results.html渲染完全没问题，但是当导航到 - 控制器被调用但没有绑定到html模板。

Answer 1

您已正确设置index.html文件，但之后您错误地使用了ui-router。

在index.html文件中：

<body ui-view>

这告诉ui-router将模板的内容加载到文档正文中，因此模板应该只是html的片段才能在body标签中呈现。所以你应该删除results.html中的所有内容，直到剩下的就是：

<div id="headerBar" >

<div class="form-group" id="headerBar" >
      <input class="form-control input-lg" type="text" id="inputlg" placeholder="Zipcode" />
       <button id="sub" class="btn btn-default btn-lg" type="submit" ng-click="vm.getInstructors()">Find an Instructor!</button>
</div>
</div>


<table>
                <tr ng-repeat="Instructors in vm.instructors">
                    <td style="padding-top:5px;">
                        <div>
                            <nav class="navbar">
                                <div class="container-fluid">



                                    <form class="navbar-form navbar-left" role="search">


                                        <div class="form-group">
                                           <input type="text" class="form-control" placeholder="Search" name="searchString" >
                                        </div>
                                        <button type="submit" class="btn btn-default" value="Filter">Search</button>
                                    </form>



                                </div><!-- /.container-fluid -->
                            </nav>
                        </div>

                    </td>
                </tr>
            </table>

        <div class="col-md-8">


        </div>

<aside class="sidebar" ui-view="map">MAP</aside>

其他一些事情。您在路线中设置了控制器，因此您无需在results.html中的任何位置指定它。此外，您应该无法导航到results.html。相反，您只需导航到（您的域名）/结果。

$ state.go（）之后，HTML无法识别控制器

1 个答案: