angularjs＆ui-router - 爲什麼家裏的控制器不工作？

正如片段所示，家裏的控制器不工作。我認爲它應該有效，但也許我錯過了一些東西。

我在想控制器定義是在錯誤的地方，但那是事情，我不知道該把它放在哪裏。

幫助是我所要求的。

angular 
 
\t .module("uiRouterSample",['ui.router']) 
 
\t .config(function($stateProvider, $urlRouterProvider){ 
 
\t \t $urlRouterProvider.otherwise("/"); 
 

 
\t \t $stateProvider 
 
\t \t \t .state('home', { 
 
\t \t \t \t url: '/', 
 
      controller: ['$scope', '$state', 
 
       function ($scope, $state) { 
 
       alert("Hola") 
 
       }] 
 
\t \t \t }) 
 
\t \t \t .state('first', { 
 
\t \t \t \t url: '/first', 
 
       views:{ 
 
        "content":{ 
 
        template:'<p>I\'m on the first page!</p>' 
 
        } 
 
       } 
 
\t \t \t }) 
 
\t \t \t .state('second', { 
 
\t \t \t \t url: '/second', 
 
       views:{ 
 
        "content":{ 
 
        template:'<p>I\'m on the second page!</p>' 
 
        } 
 
       } 
 
\t \t \t }); 
 
\t });

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script> 
 
<div ng-app="uiRouterSample"> 
 
    <h1>Hello!</h1> 
 
    <a ui-sref="first">Go to first</a> | 
 
    <a ui-sref="second">Go to second</a> 
 
    <ui-view name="content"/> 
 
</div>

來源

2016-08-16 Pedro Mora

是啊，這是一個錯誤的地點來定義一個控制器。它應該在另一個具有唯一名稱的文件中。這個名字應該在你的'$ stateProvider'中。我想你也需要另一個沒有「內容」的'ui-view'，因爲家裏沒有視圖名稱 –

哦，你說得對，它對我很有用。現在，如果我將整個應用程序根目錄放在空的'ui-view'中，我會錯嗎？ –

是的，如果你沒有不同的組件在一個視圖中加載，例如會話的自定義導航欄。你可以在一個視圖中完美包裝 –

其實並不像你不遠了。這裏是setting up a controller的Angular文檔，它可能會讓事情看起來更清晰。

看起來像唯一不工作的是警報。如果您想要打開警報窗口，則應該簽出Angular文檔here。

和here's a previous question詢問如何在頁面加載時執行此操作，而不是使用文檔中的按鈕。

來源

2016-08-16 17:32:37 caokey

如果你指的是$窗口，別擔心，我知道這一點。感謝控制器的東西。 –

啊，我明白了。 NP。您也可以在html文檔的頂部添加對應用程序的引用，例如：''''''在doctype的正下方，那麼您可以將需要訪問控制器的東西在'''

''和ng-includes中添加多個頁面視圖：'''

'''那麼你可以有一個單獨的視圖文件夾，其中包含所有頁面。這讓事情看起來更乾淨。祝你好運！ – caokey

您已經定義了在家狀態應該以這種格式

.state('home', { 
      url: '/', 
      views:{ 
       "content":{ 
        controller: ['$scope','$state',function ($scope,$state) { 
         alert("Hola") 
        }] 
       } 
      } 

     })

來源

2016-08-17 07:42:31 selftaught91

考慮聖保羅Galdo桑多瓦爾的想法來定義，我達到了這樣的解決方案。

angular 
 
\t .module("uiRouterSample",['ui.router']) 
 
    .run(['$rootScope',function($rootScope){ 
 
     //global handlers and properties 
 
     $rootScope.origin = "I come from $rootScope!"; 
 
    }]) 
 
\t .config(function($stateProvider, $urlRouterProvider){ 
 
\t \t $urlRouterProvider.otherwise("/"); 
 

 
\t \t $stateProvider 
 
\t \t \t .state('home', { 
 
\t \t \t \t url: '/', 
 
      controller: ['$scope', '$state', 
 
       function ($scope, $state) { 
 
       alert("Hola") 
 
       }] 
 
\t \t \t }) 
 
\t \t \t .state('first', { 
 
\t \t \t \t url: '/first', 
 
       views:{ 
 
        "content":{ 
 
        template:'<p>I\'m on the first page!<hr/>{{origin}}</p>' 
 
        } 
 
       } 
 
\t \t \t }) 
 
\t \t \t .state('second', { 
 
\t \t \t \t url: '/second', 
 
       views:{ 
 
        "content":{ 
 
        template:'<p>I\'m on the second page!<hr/>{{origin}}</p>' 
 
        } 
 
       } 
 
\t \t \t }); 
 
\t });

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script> 
 
<div ng-app="uiRouterSample"> 
 
    <ui-view> 
 
    <h1>Hello!</h1> 
 
    <a ui-sref="first">Go to first</a> | 
 
    <a ui-sref="second">Go to second</a> 
 
    <ui-view name="content"/> 
 
    </ui-view> 
 
</div>

來源

2016-08-17 12:20:18

angularjs＆ui-router - 爲什麼家裏的控制器不工作？

回答

相關問題