Question

我是新的Angular并试图为Angular UI路由器设置一个有效的示例

我研究了一些关于stackoverflow的问题，但没有具体看到这个问题。我的问题是，即使在浏览器调试和网络分析中，我看到我的模板html被调用，仍然没有在浏览器中看到任何内容。控制台中没有错误

AngularJS ui-router - template not displaying

使用Angular 1.4.7和corrosponding

请在下面找到app.js

(function(){
    angular.module('TestPrj',['ui.router']);

    angular.module('TestPrj').config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/ReportB');
        $stateProvider
        .state('a', {
            url: '',
            abstract:true,
            controller:'mainController',
            controllerAs:'main',
            templateUrl: 'partials/home.html'
        })
        .state('a.b', {
            url: '/ReportB',
            controller:'B',
            controllerAs:'B',
            templateUrl: "partials/B.html"
        }); 
    });

    angular.module('TestPrj').run(function($rootScope,$state){
          $rootScope.$on("$stateChangeError", console.log.bind(console));
        });

})();

Controller b.js：

(function(){

angular.module('TestPrj').controller('B',B);

    function B($state){
        this.pageName = "Report a B";
    }

    B.$inject = ["$state","$stateParams","$scope"];

})();

Controller main.js
(function(){

angular.module('TestPrj').controller('mainController',mainController);

function mainController($state,$translate){

    }

mainController.$inject = ["$state","$translate"];

})();

的index.html

<!DOCTYPE html>
<html>
<head ng-app="TestPrj" lang="en">
        <script type="text/javascript" src="js/lib/angular.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-ui-router.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-translate.min.js"></script>
        <script type="text/javascript" src="js/lib/angular-translate-loader-url.js"></script>
        <script type="text/javascript" src="js/lib/ui-bootstrap-tpls-0.12.0.min.js"></script>
        <script type="text/javascript" src="js/lib/ui-mask.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>

        <script type="text/javascript" src="js/controllers/claimTypeSelection.js"></script>
        <script type="text/javascript" src="js/controllers/main.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>

分音/ home.html的

<div class="container">
    <div ui-view=""></div>
</div>

分音/ B.html

<div>
    <div ui-view=""></div>  
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</div>

还分享我的项目设置的截图 Angular Setup

Answer 1

基于我的挖掘，我认为问题是你做了第一个状态摘要。在ui-router的github上发布了一个问题，您可以阅读here。另外，请考虑两个plunkr示例

without abstract

    $stateProvider
        .state('route1', {
            url: "/route1",
            templateUrl: "route1.html"
        })
          .state('route1.list', {
              url: "/list",
              templateUrl: "route1.list.html",
              controller: function($scope){
                $scope.items = ["A", "List", "Of", "Items"];
              }
          })

        .state('route2', {
            url: "/route2",
            templateUrl: "route2.html"
        })
          .state('route2.list', {
              url: "/list",
              templateUrl: "route2.list.html",
              controller: function($scope){
                $scope.things = ["A", "Set", "Of", "Things"];
              }
          })
    })

with abstract

    $stateProvider
        .state('route1', {
            url: "/route1",
            abstract: true,
            templateUrl: "route1.html"
        })
          .state('route1.list', {
              url: "/list",
              templateUrl: "route1.list.html",
              controller: function($scope){
                $scope.items = ["A", "List", "Of", "Items"];
              }
          })

        .state('route2', {
            url: "/route2",
            templateUrl: "route2.html"
        })
          .state('route2.list', {
              url: "/list",
              templateUrl: "route2.list.html",
              controller: function($scope){
                $scope.things = ["A", "Set", "Of", "Things"];
              }
          })
    })

第二个plunkr是第一个的副本，除了抽象：true被添加到状态，现在它没有工作。

此外，请确保在使用ui-router时频繁清除浏览器缓存或禁用缓存。提供缓存结果非常糟糕。

Answer 2

目前还不清楚为什么使用抽象状态。抽象状态可以为子状态提供数据和进入/退出处理。但它没有被激活。它需要一个模板。

https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states

在你的例子中，子状态完成了这些，并且显然意味着使用抽象状态。

看起来你并不打算把它抽象化。

更新：抽象网址不能为空。这是您的代码示例，其中包含网址：

.state('a', {
    url: '/a',
    abstract: true,
    controller: 'mainController',
    controllerAs: 'main',
    templateUrl: 'partials/home.html'
})

http://plnkr.co/edit/11o6qF?p=preview

要查看功能，请使用此链接：http://run.plnkr.co/CUN147Z4YdCKRxRw/#/a/b

Angularjs-ui-router没有在浏览器中显示模板的内容

2 个答案: