UI-Router 不使用 ui-sref 注册动态创建的元素

Posted 2023-05-09

【中文标题】UI-Router 不使用 ui-sref 注册动态创建的元素

【英文标题】：UI-Router does not Register Dynamically Created Element with ui-sref

【发布时间】：2017-01-23 04:32:42

【问题描述】：

我使用 UI-Router 创建了一个 SPA 来管理我的视图。导航栏最初是一个静态导航栏，并且路由工作正常：

<div id="mainNavBar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">

        <li ui-sref-active="active" class="dropdown">
            <a ui-sref="alerts" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-exclamation-triangle"></span> Alerts<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li ui-sref-active="active"><a ui-sref="alerts.map"><span class="fa fa-exclamation-triangle"></span> Alert Map</a></li>
                <li ui-sref-active="active"><a ui-sref="alerts.pareto"><span class="fa fa-exclamation-triangle"></span> Alert Pareto</a></li>
                <li ui-sref-active="active"><a ui-sref="alerts.history"><span class="fa fa-exclamation-triangle"></span> Alert History</a></li> 
            </ul>
        </li>

        ...

    </ul>
</div>

该网站随后被更改为从通过查询数据库获得的 JSON 对象动态填充导航栏。

function generate_header_menu(callback)    
    $.getJSON('php/site_configuration.php', function(layoutData)

        var numberOfCategories = layoutData.categories.length;

        var headerMenu = $('#header_menu');

        for (var i = 0; i < numberOfCategories; i++)
            console.log(layoutData.categories[i]);

            var categoryItem = $('<li>');
            var categoryItemList = $('<ul>').attr('class','dropdown-menu');

            headerMenu.append(
                categoryItem.attr('ui-sref-active', 'active').attr('class', 'dropdown')
                .append(
                    $('<a>').attr('ui-sref', layoutData.categories[i].uiRouterState).attr('class','dropdown-toggle').attr('data-toggle','dropdown')
                    .append(
                        $('<span>').attr('class', layoutData.categories[i].icon)
                    )
                    .append("&nbsp;&nbsp;" + layoutData.categories[i].name)
                    .append(
                        $('<span>').attr('class', 'caret')
                    )
                )
            );  

            categoryItem.append(categoryItemList);

            var numberOfSubCategories = layoutData.categories[i].subcategories.length;
            for (var j = 0; j < numberOfSubCategories; j++)
                categoryItemList.append(
                        $('<li>').attr('ui-sref-active', 'active')
                        .append(
                            $('<a>').attr('ui-sref', layoutData.categories[i].uiRouterState + "." + layoutData.categories[i].subcategories[j].uiRouterState)
                            .append(layoutData.categories[i].subcategories[j].name)
                        )
                    );
            

        

        callback(layoutData);
    )
    .error(
        function()  
            console.log("Error Obtaining Site Configuration"); 
        
    );      

在第二种情况下，ui-sref 和 ui-sref-active 指令不起作用。 app.config 中的路由对于静态和动态加载的导航栏都是相同的，当我转到一个 URL 时，会加载正确的 ui-view，但相应的导航栏项未设置为活动。

这是因为导航栏是在网页加载后填充的吗？我如何解决它？

【参考方案1】：

您遇到的问题是您正在使用带有 Angular 指令的 jQuery DOM 操作。这是行不通的。您需要了解如何引导 Angular 应用程序以及如何处理指令。

见here:

指令是如何产生的（编译和实例化）

当 DOM 完成加载并且 AngularJS 进程开始启动时，发生的第一个过程是浏览器将 html 解析为 DOM 树。然后使用 AngularJS 的 $compile() 方法解析这棵树。 $compile 遍历 DOM 树并查找不同 DOM 元素的指令声明。一旦为每个 DOM 元素找到所有指令声明并排序（按优先级，我们将很快介绍），指令的 compile 函数就会运行，并且预计会返回一个 link() 函数。 $compile() 函数将返回一个链接函数，它包装了所有包含 DOM 元素的指令的链接函数。

最后，使用包含范围调用链接函数 将所有相关指令附加到该范围。这是 在构建指令时，我们将在其中完成大部分工作，因为这是 我们可以在其中注册侦听器、设置监视并添加 功能。这个过程的结果就是为什么实时数据绑定 存在于作用域和 DOM 树之间。

如果您想要动态的ui-srefs，请继续将srefs 绑定到某种列表：

<a ui-sref="sref" ng-repeat="sref in srefs">sref</s>

在你的控制器中：

$scope.srefs = ['linka','linkb','linkc']; //Populated from your API response

【讨论】：

谢谢，我修好了 :)