个人中心
gpt4 book ai didi

javascript - 嵌套在指令中的 angular-ui View 不加载 View 内容

转载 作者：行者123 更新时间：2023-11-29 18:17:30 25 4
gpt4 key购买 nike

如果我将 ui-view 嵌套在 transclude=true 的指令中，则不会加载 View 内容。它在没有干预指令的情况下工作正常。

因此页面包含:

<body>
<div ng-controller="MainController">
        <div ui-view="sampleView"></div>
</div>
</body>

sampleView 内容出现。

但是如果我把

<body>
<div ng-controller="MainController">
    <div sample-directive>
        <div ui-view="sampleView"></div>
    </div>
</div>
</body>

然后 View 内容不出现。

我创建了一个简单的 html 页面来演示该问题，请参见下文。

据我所知， Angular 编译过程确实在 angular-ui 的 ui-view 指令中正确调用了 updateView，并且确实构建了 View 内容并将其插入到 sample-directive 节点下的 dom 中，但是这似乎不是实际可见的示例指令节点，而是它的一个克隆。我猜它与编译顺序有关，因此我需要在指令中做一些聪明的事情，但我在 Angular api 帮助中找不到任何内容涵盖这一点。

我试过添加后链接功能并从那里调用 $transclude，但没有任何区别。

任何人都可以建议我需要添加到指令中的内容，这样才能起作用。谢谢

更新进一步调查的新信息:似乎是这个原因(目前不是解决方案，但我明白为什么会这样)。在 angular 的函数 applyDirectivesToNode(angular.js 5919 行)中，如果指令指定 transclude=true，则原始指令节点被克隆以制作模板节点。即模板不是在 dom 中可见的原始节点。现在，当 angular-ui-router.js 的第 2204 行中的 ui-view 的编译函数被调用时，它会获取 ui-view 节点的父节点的副本，并将其存储在 parentEl 中。但是，这就是问题所在 - 这个父级是 ui-view 节点的 dom 中的父级。最肯定不是链接后实际在 dom 中结束的父实例。稍后当 ui-view 更新初始路由更改时，它构建 View 内容并将其插入到 parentEl 下(angular-ui-router.js 行 2273)，但正如我们之前看到的，链接后它不在可见 dom 中.它是源 html 节点，而不是通过编译和链接嵌套 ui-view 的指令创建的克隆。

我认为这可能是 ui-view 中的错误。

可能有一种方法可以向指令添加变通方法，以获取后链接 View 实例并将其放入指令中。如果我弄明白了，我会添加一个答案。

html 演示问题如下:

<!DOCTYPE html>
<html lang="en" ng-app="viewInDirectiveApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>View inside a directive</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>

<script src="modules/angular-ui-router.js"></script>

<script>
    var viewInDirectiveApp = angular.module('viewInDirectiveApp', ['ui.router']);

    viewInDirectiveApp.config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('sampleState', {
                url: '/sampleState',
                views: {
                    sampleView: {
                        template: 'This is the view content',
                        controller: function ($scope) {
                        }
                    }
                }
            });
        $urlRouterProvider.otherwise("/sampleState");
    })
    .controller('MainController', ['$scope',
        function ($scope) {
        }])
    .directive('sampleDirective', function () {
        return {
            template: 'Start directive content <div ng-transclude></div> End directive content',
            transclude: true
        };
    });
</script>
</head>
<body>
<div ng-controller="MainController">
    Before sampleDirective
    <div sample-directive>
        Before sampleView
        <div ui-view="sampleView"></div>
        After sampleView
    </div>
    After sampleDirective
</div>
</body>
</html>

最佳答案

关于javascript - 嵌套在指令中的 angular-ui View 不加载 View 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21803661/

25 4 0
文章推荐： javascript - Protractor :我应该如何从 browser.executeAsync 传播错误？
文章推荐： php - "Insert SQL"通过将相同的值插入到列中
文章推荐： javascript - 将Mysql TIME 数据类型转换为JS Date - Hibernate HQL？
文章推荐： android - 自定义 Android EditText
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com