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

发布时间:2020-08-01 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了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仅在选择路由时加载控制器全部内容,希望文章能够帮你解决javascript – Angular UI-Router仅在选择路由时加载控制器所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!