控制器在$ state.go（）後沒有被HTML識別（）

我對Angular相當陌生，對於使用ui-router非常新穎，所以我可能會錯過顯而易見的東西。

如果我自己啓動我的results.html頁面，則Web API中的所有內容都將通過控制器正確綁定，並按預期方式顯示。

當我從index.html開始，然後單擊調用$ state.go（）的按鈕時，我將導航到results.html頁面，但是沒有任何控制器的數據顯示出來。雖然控制器&服務仍然被調用 - 因爲我把console.log（）語句用於驗證我想要的對象是否在$ state.go（）之後被返回，它是 - 模板只是沒有註冊它。

這裏是我的我的UI路由器和主控制器代碼：

// 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模板。

來源

2016-05-21 Ashley Taylor

其中是ResultsController？ – Sajeetharan

它在結果文件中 - 但在我的index.html文件中，我將其包含在此script.js文件之後。 @Sajeetharan –

您是否可以爲此問題創建一個plunker？ – Sajeetharan

你有你的index.html文件設置正確，但之後，你錯誤地使用ui路由器。

在您的index.html文件，你必須：

<body ui-view>

這告訴UI路由器到您的模板的內容加載到您的文檔的身體，讓你的模板應該僅僅是HTML的代碼片斷在您的身體標記內呈現。所以你應該刪除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。相反，您只需導航到（您的域名）/結果。

來源

2016-05-21 11:41:05

，所以這對於最佳實踐和清潔非常有用解決方案。但是，它仍然沒有解決問題。我要去的域/結果，這是當我的控制器沒有加載到模板仍然。它被稱爲 - 我在控制器中輸出的console.log語句。所以我仍然不確定這是否與我如何定義模板有關，或者是否需要澄清$ state.go中的某些內容（）@MikeFeltman –

當您有機會時，清理重擊器以匹配你現在有什麼，我會看看。 –

控制器在$ state.go（）後沒有被HTML識別（）

回答

相關問題