AngularJS UI路由器命名视图延迟加载

Question

AngularJS UI路由器命名视图基于用户访问加载而不是在状态路由访问时加载。

例：

$stateProvider
.state("login",
{
    url: "/login",
    templateUrl: getTemplateUrl("login/Index")
})    
.state("main",
{
    url: "/main",
    views: 
    {
        '': { templateUrl: getTemplateUrl('home/shell') },
        'test1@main': { templateUrl: 'home/test1' },
        'test2@main': { templateUrl: 'home/test2' },
        'test3@main': { templateUrl:  getTemplateUrl('home/test3') }                     
    }
});

在上面的示例中，当用户访问状态main ，UI路由器从服务器加载所有命名视图html。

题：

我们可以在下面需要时加载命名视图吗？ 我的意思是每当我们动态添加新标签然后只从服务器加载尊重的视图html。

<tab ng-repeat="tab in tabs">    
    <div>     
        <div ui-view='{{tab.view}}'></div>
    </div>
 </tab>

Answer 1

如果您希望根据$scope.tabs定义的用户可用选项卡的值从模板URL动态加载选项卡内容，则应考虑使用简单指令而不是ui-router视图。

正如您已经发现的那样，ui-router将尝试加载子视图，无论它们是否在该状态的主视图中被引用。

但是，我们可以使用自己的指令来加载模板，因为该指令仅在主视图中存在时运行，模板按需加载。

`template`指令：

我们创建了一个template指令，允许我们将模板插入到html元素中。

.directive('template', ['$compile', '$http', function($compile, $http) {
    return {
        restrict: 'A',
        replace: false,
        link: function($scope, element, attrs) {
            var template = attrs['template'];
            var controller = attrs['controller'];
            if(template!==undefined){
                // Load the template
                $http.get(template).success(function(html){
                    // Set the template
                    var e = angular.element(controller === undefined || controller.length === 0 ? html : "<span ng-controller='" + controller + "'>" + html + "</span>");
                    var compiled = $compile(e);
                    element.html(e);
                    compiled($scope);
                });
            }
        }
    };
}]);

所以这段代码使用$http服务从服务器获取模板。 然后，它使用$compile服务将范围应用于角度模板，并将其呈现到目标元素中。

用法：

更新主选项卡模板的格式，如下所示。 注意我们不再引用ui-view ，而是调用我们的template指令传递我们想要在div加载的url 。 div的当前内容是加载指示符。

（如果设置了controller属性，模板将使用具有ng-controller属性的<span>包装，因此可以应用模板控制器。这是可选的。）

在`home/shell` ：

<tab ng-repeat="(tabName,tab) in tabs">
    <div template='{{tab.template}}' controller="{{tab.controller}}">Loading {{tabName}} ...</div>
 </tab>

然后设置要显示的选项卡：

$scope.tabs = {
    'tab1': { template: 'home/tab1'},
    'tab2': { template: 'home/tab2', controller: 'Tab2Controller' },
    'tab3': { template: 'home/tab3'}
};

完整来源：

这只是将上面给出的代码作为AngularJS应用程序的示例。 假设模板路径有效，即home/shell ， home/tab1等。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <meta charset="utf-8">
    <title>Angular Views</title>
</head>
<body ng-app="myTabbedApp">
    <div ui-view></div>
    <script>
        angular.module('myTabbedApp', ['ui.router'])

            /* Controller for the Main page ie. home/shell */
            .controller('MainPageTabController', ['$scope', function($scope) {
                // Set the page tabs dynamically as required by your code
                $scope.tabs = {
                    'tab1': { template: 'home/tab1'},
                    'tab2': { template: 'home/tab2', controller: 'Tab2Controller' },
                    'tab3': { template: 'home/tab3'}
                };
            }])

            /* Example controller for Tab 2 */
            .controller('Tab2Controller', ['$scope', function($scope) {
                $scope.hello = "world";
            }])

            /* State provider for ui router */
            .config(['$stateProvider', function($stateProvider){
                $stateProvider
                    .state("login",
                    {
                        url: "/login",
                        templateUrl: "login/index"
                    })
                    .state("main",
                    {
                        url: "/main",
                        templateUrl: 'home/shell',
                        controller: 'MainPageTabController'
                    });
            }])

            /* Directive to load templates dynamically */
            .directive('template', ['$compile', '$http', function($compile, $http) {
                return {
                    restrict: 'A',
                    replace: false,
                    link: function($scope, element, attrs) {
                        var template = attrs['template'];
                        if(template!==undefined){
                            // Load the template
                            $http.get(template).success(function(html){
                                // Set the template
                                var e = angular.element(html);
                                var compiled = $compile(e);
                                element.html(e);
                                compiled($scope);
                            });
                        }
                    }
                };
            }]);
    </script>
</body>
</html>

我希望这有帮助。 如果您对某事有疑问，请询问。

AngularJS UI路由器命名视图延迟加载

问题描述

例：

题：

1 个解决方案

解决方案1
5 已采纳 2015-05-23 23:47:12

`template`指令：

用法：

在`home/shell` ：

完整来源：

AngularJS UI路由器命名视图延迟加载

问题描述

例：

题：

1 个解决方案

解决方案1 5 已采纳 2015-05-23 23:47:12

template指令：

用法：

在home/shell ：

完整来源：

解决方案1
5 已采纳 2015-05-23 23:47:12

`template`指令：

在`home/shell` ：