HTML

Question

我对角度ui-router模块有很多疑问。在使用那个应用程序实现我的应用程序之前，我试着去理解它，但即使是简单的事情我也有问题。

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.view传递给所有子状态，但它似乎也没有工作 3）如果我想做的事情是以错误的方式完成的，那么更好的做法是什么？

Answer 1

花了更多的时间比我应该玩它，我想我想出你在找什么。

我做了一些修改，我会尝试全部检查。

在HTML中，我添加了ui-router，将你的js脚本标签移到了</body>之前，这让我摆脱了所有控制台错误：

<!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
            'view1@father': {
               templateUrl: 'view1.html',
               controller: function($scope) {
                  console.log($scope.view);
               }
            },
            'view2@father': {
               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

ui-router嵌套视图和传递变量

HTML

修改

1 个答案: