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

Question

AngularJS UI router named 视图根据用户访问加载，而不是在状态路由访问时加载。

示例：

$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-路由器视图。

正如您已经发现的那样 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 服务将范围应用到 angular 模板，并将其呈现到目标元素中。

用法：

如下更新主标签模板的格式。请注意，我们不再引用 ui-view，而是调用 template 指令传递 url 我们要在 div 中加载。 以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 路由器命名视图延迟加载

AngularJS UI router named views lazy loading

javascript

asp.net-mvc-4

angularjs

angular-ui-router

示例：

问题：

`template` 指令：

用法：

在`home/shell`中：

完整来源：

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

AngularJS UI router named views lazy loading

javascript

asp.net-mvc-4

angularjs

angular-ui-router

示例：

问题：

template 指令：

用法：

在home/shell中：

完整来源：

`template` 指令：

在`home/shell`中：