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

Venkat 发表于 Dev

文卡特

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>

史考特

如果您希望根据中定义的用户可用标签的值从模板url动态加载标签内容$scope.tabs，则应考虑使用简单的指令而不是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指令。当前的内容正在作为加载指示器。urldivdiv

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

在`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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-03-30

我来说两句

0 条评论

登录后参与评论