javascript – Angular UI-Router仅在选择路由时加载控制器

假设我有两个页面,云和设置.我有以下代码设置：

var routerApp = angular.module('APP',['ui.router']);

routerApp.config(function($stateProvider,$urlRouterProvider,$locationProvider) {

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/cloud');

    $stateProvider

        .state('cloud',{
            url: '/cloud',templateUrl: 'pages/templates/cloud.html',controller: 'cloud',})

        .state('settings',{
            url: '/settings',templateUrl: 'pages/templates/settings.html',controller: 'settings'  
        });

});

routerApp.controller('cloud',function($scope,$http,$state) {
    alert("cloud");
});

routerApp.controller('settings',$state) {
    alert("settings");
});

HTML

<!DOCTYPE html>
<html lang="en" ng-app="APP">
    <head>
        <title>TITLE</title>
        <base href="/">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
        <script src="/js/app.js" type="text/javascript"></script>
    </head>
    <body>

        <div id="navContainer">
            <a ui-sref="cloud">Cloud</a>
            <a ui-sref="settings">Settings</a>
        </div>

        <div id="pageContent">
            <div ui-view></div>
        </div>

    </body>
</html>

无论我加载什么页面,设置或云,每个控制器都会运行,无论如何.这意味着当我重新加载页面时,我将收到2个警报.

任何人都可以帮忙解释我需要做什么,这样如果我在/ settings上重新加载我的网站,只有我的设置控制器中的代码会运行,反之亦然？

解决方法

如果在路由器正在加载的部分(视图)中声明了控制器,那么这些控制器将仅在加载视图时触发.听起来像你需要一个父控制器,它将触发你可以控制两个视图的逻辑.

你的代码：

$stateProvider.state('cloud',controller: 'settings'  
        });

您正在设置控制器,如果您希望它们共享一个控制器,只需参考相同的控制器,如下所示：

$stateProvider

    .state('cloud',{
        url: '/cloud',controller: 'shared',})

    .state('settings',{
        url: '/settings',controller: 'shared'  
    });

javascript – Angular UI-Router仅在选择路由时加载控制器

解决方法

相关推荐