0

我是 angularjs 世界的新手,正在使用 angularjs 1.4 版和新路由器开发 angular js 应用程序。

到目前为止,1 个小问题都可以正常工作。也就是说,当我转到任何特定链接时,它都不起作用。但是,在那之后,如果我刷新页面或在该链接上再次单击 ENTER 键,它就会开始工作。

例如:我在我的页面中关注了 2 个链接。

当我转到第一个链接http://localhost/angular/#/它不起作用并且在控制台中出现以下错误但是如果我再次单击链接或刷新链接控制台错误清除并且它开始工作。同样的情况也发生在第二个链接上。

Chrome 控制台错误 - 在此处输入图像描述

以下是文件代码 -

索引.html

<html lang="en" ng-app="TeamTalk">
    <head>
        <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
        <meta name="viewport" content="initial-scale=1" />

        <link rel="stylesheet" type="text/css" href="assets/css/style.css">        
    </head>

    <body layout="column" ng-controller="AppCtrl">    

        <div ng-if="location.path() == '/home'">        
            <md-toolbar layout="row">
                <div class="md-toolbar-tools">
                    <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
                        <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
                    </md-button>

                    <div ng-outlet="navigation" id="navigation">                                        
                    </div>
                </div>
            </md-toolbar>
        </div>

        <div ng-if="location.path() == '/home'" layout="row" flex>
            <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
                <div ng-outlet="sidebar">
                </div>  
            </md-sidenav>

            <div layout="column" flex id="content">
                <md-content layout="column" flex class="md-padding">
                    <div ng-outlet="main">
                    </div>
                </md-content>
            </div>
        </div>


        <div ng-if="location.path() == '/'" style="background:#3F51B5" ng-outlet="landing" id="landing">
        </div>


        <script src="bower_components/angular/angular.min.js"></script>
        <script src="bower_components/angular-animate/angular-animate.min.js"></script>
        <script src="bower_components/angular-aria/angular-aria.min.js"></script>

        <script src="bower_components/angular-material/angular-material.min.js"></script>
        <script type="text/javascript" src="assets/js/router.es5.js"></script>
        <script type="text/javascript" src="assets/js/app.js"></script>
    </body>
</html>

应用程序.js

var app = angular.module('TeamTalk', ['ngMaterial', 'ngNewRouter']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', '$router', '$location', function($scope, $mdSidenav, $router, $location){
    $scope.toggleSidenav = function(menuId) {
        $mdSidenav(menuId).toggle();
    };

    $scope.location = $location;

    // Configure router, pass array of mappings
    $router.config([
        {
            // Define url for this route
            path: '/',

            // Map components to viewports for this route
            components: {
                'landing':'landing'
            }, 
            as: 'landing'
        },
        {
            // Define url for this route
            path: '/home',

            // Map components to viewports for this route
            components: {
                // Load home component in main viewport
                'main': 'main',
                'navigation': 'navigation',
                'sidebar':'sidebar'
            }, 
            as: 'home'
        }

    ]);


    var locPath = false;

    locPath = $location.path();
    console.log('Current route name: ' + locPath);  

}]);


app.controller('NavigationController', function(){

});

app.controller('SidebarController', function(){

});

app.controller('MainController', function(){

});

app.controller('LandingController', function(){

});

任何线索为什么它会这样?

4

1 回答 1

0

将配置作为属性绑定到控制器(示例):

var app = angular.module('TeamTalk', ['ngMaterial', 'ngNewRouter']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', '$router', '$location', AppCtrl]);


function AppCtrl ($scope, $mdSidenav, $router, $location){
        $scope.toggleSidenav = function(menuId) {
            $mdSidenav(menuId).toggle();
        };

        $scope.location = $location;

        // Configure router, pass array of mappings



        var locPath = false;

        locPath = $location.path();
        console.log('Current route name: ' + locPath);  

    }
AppCtrl.$routeConfig = [
        {
            // Define url for this route
            path: '/',

            // Map components to viewports for this route
            components: {
                'landing':'landing'
            }, 
            as: 'landing'
        },
        {
            // Define url for this route
            path: '/home',

            // Map components to viewports for this route
            components: {
                // Load home component in main viewport
                'main': 'main',
                'navigation': 'navigation',
                'sidebar':'sidebar'
            }, 
            as: 'home'
        }

    ];

    <link rel="stylesheet" type="text/css" href="assets/css/style.css">        
</head>

<body layout="column" ng-controller="AppCtrl">    
    <div ng-viewport></div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.min.js"></script>

    <script src="bower_components/angular-material/angular-material.min.js"></script>
    <script type="text/javascript" src="assets/js/router.es5.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="components-path/main/main.js"></script>
<script type="text/javascript" src="components-path/navigation/navigation.js"></script>
<script type="text/javascript" src="components-path/sidebar/sidebar.js"></script>
<script type="text/javascript" src="components-path/landing/landing.js"></script>
</body>

// components-path/landing/landing.js
app.controller('LandingController', function(){

});

// components-path/landing/landing.html
        <div style="background:#3F51B5" ng-outlet="landing" id="landing">


// components-path/navigation/navigation.js
app.controller('NavigationController', function(){

});
// components-path/navigation/navigation.html
                    <div ng-outlet="navigation" id="navigation">                                        
                    </div>


// components-path/sidebar/sidebar.js
app.controller('SidebarController', function(){

});
// components-path/sidebar/sidebar.html
    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
            <div ng-outlet="sidebar">
            </div>  
        </md-sidenav>

        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                <div ng-outlet="main">
                </div>
            </md-content>
        </div>
    </div>



// components-path/main/main.js
app.controller('MainController', function(){

});
// components-path/main/main.html
 <div>        
                <md-toolbar layout="row">
                    <div class="md-toolbar-tools">
                        <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
                            <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
                        </md-button>
                </div>
            </md-toolbar>
        </div>
于 2015-06-23T08:13:12.907 回答