我有很多關於角度ui路由器模塊的問題。我試着在使用該應用程序執行應用程序之前瞭解它，但即使使用簡單的東西，我也遇到了問題。ui路由器嵌套視圖和傳遞變量

HTML

<!doctype> 
<html ng-app='myapp'> 
<head> 
<title>main</title> 
<meta charset="utf-8"> 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script> 
<!--controller--> 
<script src="app.js"></script> 
<script src="controller.js"></script> 

<!-- endbuild --> 
</head> 
<body> 
hi 
    <div ui-view="view1"></div> 
    <div ui-view="view2"></div> 
</body> 
</html>

編輯

var app=angular.module('myapp',['ui.router' 
]); 

app.config(function($stateProvider/*,$urlRouteProvider*/){ 
//$urlRouteProvider.otherwise("view1"); 
$stateProvider. 
    state('father',{ 
     abstract:true, 
     template:'<div ui-view></div>', 
     controller:function($scope){ 
      $scope.view='hi'; 
     } 
    }). 
    state('son',{ 
     parent:'father', 
     url:'/', 
     views:{'view1':{ 

      templateUrl:'view1.html' 
      }, 
      'view2':{ 
       templateUrl:'view2.html' 
     } 
    } 
    }) 
})

，這是我的js plunker http://plnkr.co/edit/hsEFKhpaGkIkzarQiuQQ?p=preview。現在的問題：
1）正如你可以在index.html中看到什麼都沒有出現，我的第一意圖是在主窗口中看到兩個視圖
2）我已經構建了一個抽象狀態來傳遞$ scope 。查看所有的孩子狀態，但它似乎不起作用
3）如果我想要做的是以錯誤的方式完成，有什麼更好的方法來做到這一點？

來源

2014-03-04 mautrok

在控制檯，它說你有一個注射錯誤，我沒有看到你在哪裏包括UI路由器源 – jnthnjns

花了更多的時間比我應該玩它，我想我找出你在找什麼。

我做了一些改變，我會盡量全面地檢查它們。

在HTML，我UI添加的路由器，只</body>之前動了你的js腳本標籤，這讓我擺脫所有控制檯的錯誤：

<!doctype> 
<html ng-app='myapp'> 

<head> 
    <title>main</title> 
    <meta charset="utf-8"> 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"> 
</head> 

<body> 
    <div ui-view ></div> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script> 
    <script src="ui-router.js"></script> 
    <script src="app.js"></script> 
</body> 

</html>

比你的app.js文件我做了一些改動：

app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.when('', '/'); 
    $stateProvider 
     .state('father', { 
     abstract: true, 
     // I couldn't get this to work without a templateUrl for some reason, 
     // I'm sure with a little time you could figure this part out. 
     templateUrl: 'father.html', 
     controller: function($scope) { 
      $scope.view = 'Hello Dad'; 
      console.log($scope.view); 
     } 
     }) 
     .state('father.son', { 
     parent: 'father', 
     url: '/', 
     views: { 
      // Added the absolute target declaration `@father`, see link 1 below 
      '[email protected]': { 
       templateUrl: 'view1.html', 
       controller: function($scope) { 
        console.log($scope.view); 
       } 
      }, 
      '[email protected]': { 
       templateUrl: 'view2.html', 
       controller: function($scope) { 
        console.log($scope.view); 
       } 
      } 
     } 
     }) 
});

這裏是father.html模板：

<!-- Big file, I know --> 
<div ui-view="view1"></div> 
<div ui-view="view2"></div>

鏈接1：View Names - Relative vs. Absolute Names
鏈接2：Plunker

來源

2014-03-04 18:18:17 jnthnjns

ui路由器嵌套視圖和傳遞變量

HTML

編輯

回答

相關問題