Question

我没有更新任何我的.js文件，但我的嵌套视图根本没有显示（即使它们在之前）和throw this error in console。

为什么它会抛出错误并且不显示原来的嵌套视图？

角度版本：1.6.0-rc.0（.min.js）

angular-ui-router版本：v0.3.1（.min.js）

app.js

'use strict';

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

app.config(function($stateProvider, $urlRouterProvider)
{
    $urlRouterProvider.otherwise('/');

    // Initialize states
    var homeState =
    {
        name:'home',
        url:'/',
        views:
        {
            '' : {templateUrl: 'partials/home.html'}, // App template that organizes the layout of the panels
            'panel@home' : {templateUrl: 'partials/panel.html'} // Reusable panel template for multiple panels within app
        }
    };

    // Register states
    $stateProvider.state(homeState);
});

controller.js

'use strict';

var controllers = angular.module("controllers", []);

// Initialize controllers
controllers.controller('panelEvaluateController',function($scope)
{
    $scope.header = 'Solve an Equation';
    $scope.button = '<button>Solve</button>';
    $scope.body = 'partials/panels/evaluate.html';
    $scope.tooltip = 'Help';
});

controllers.controller('panelConvertController',function($scope)
{
    $scope.header = 'Convert an Integer';
    $scope.button = '<button>Convert</button>';
    $scope.body = 'partials/panels/convert.html';
    $scope.tooltip = 'Help convert';

    $scope.bases =
    [
        { value : 2 , name : 'Binary'},
        { value : 8 , name : 'Octal'},
        { value : 10 , name : 'Decimal'},
        { value : 16 , name : 'Hex'}
    ];

    $scope.base =
    [
        {selected : 2},
        {selected : 10}
    ];
});

controllers.controller('panelSolutionController',function($scope)
{
    $scope.header = 'Solution';
    $scope.button = '<div class="row"><div class="col-sm-6"><button><span class="glyphicon glyphicon-chevron-left"></span></button></div><div class="col-sm-6"><button><span class="glyphicon glyphicon-chevron-right"></span></button></div></div>';
    $scope.body = 'templates/panels/solution.html';
    $scope.tooltip = 'solve';
});

的index.html

<!DOCTYPE html>
<html data-ng-app="app" lang="en">
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
        <title>Show Your Work</title>
        <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="resources/css/specific.css">
    </head>
    <body>

        <div id="header">
            <div class="header-color-line"></div>
            <div id="logo">Show Your Work</div>
        </div>

        <div class="row" id="view-container">
            <div data-ui-view=""></div> <!-- displays home.html -->
        </div>

        <script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="vendor/angular/angular.js"></script>
        <script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
        <script type="text/javascript" src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="resources/js/app.js"></script>
        <script type="text/javascript" src="resources/js/controllers.js"></script>
        <script type="text/javascript" src="resources/js/filters.js"></script>
    </body>
</html>

filters.js

'use strict';

var filters = angular.module("filters", []);

filters.filter('trusted', function($sce)
{
    return function(val)
    {
        return $sce.trustAsHtml(val);
    };
});

Answer 1

您需要更新应与角度版本匹配的ui-router版本，现在您提到的版本不匹配。

  <script type="text/javascript" src="vendor/angular/angular.js"></script>
  <script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>

angular.js throws无法读取未定义的属性'then'

1 个答案: