在角度 ui-router 视图中嵌入 javascript答案

【问题标题】：Embed javascript in angular ui-router view在角度 ui-router 视图中嵌入 javascript
【发布时间】：2014-04-05 18:34:16
【问题描述】：

如果这个问题已经得到回答，我真的很抱歉，但我不知道如何搜索它，因为它看起来很具体。

我有一个 AngularJS 应用程序，它使用 ui-router 将多个视图动态加载到同一个 <ui-view> 元素中。我想在 ui-router 动态加载的 h3 元素之一上使用 Jquery UI 的工具提示功能，但我不知道将初始化程序放在哪里，以便它在 h3 在 DOM 中运行之后运行。

我尝试过的事情：

在调用$("h3").tooltip()的HTML部分嵌入<script>标签
将脚本标记放在主要的父 HTML 模板中 - 带有和不带有 document.ready 包装器
将 tooltip() 函数调用放入加载部分的 Angular js 文件之一（当我将行更改为 alert() 时，似乎这段代码在部分呈现之前就正在运行，所以有还没有<h3>s）

我对如何在动态加载的元素上运行任意 javascript 代码感到非常困惑……我认为第一种方法应该可行。即使我让<script> 标签只包含一个简单的alert()，也没有任何反应。

有什么想法吗？我也很乐意提供更多信息，但我认为由于保密协议，我无法显示实际代码。

【问题讨论】：

标签： javascript html angularjs jquery-ui angular-ui-router

【解决方案1】：

希望这些对您有所帮助：

Embed javascript in angular ui-router view

AngularJS: How to make angular load script inside ng-include?

【讨论】：

【解决方案2】：

您为使该工具提示正常工作而采取的方法非常错误。您应该将工具提示插件包装在指令中并将该指令分配给您的 h3 元素，而不是尝试在视图中动态加载脚本。或者，更简单的是，使用 Angular UI Bootstrap 的 Tooltip 指令：http://angular-ui.github.io/bootstrap/

自定义指令的模拟代码：

'use strict';

angular.module('MyModule')
    .directive('tooltip', function () {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                // initialize jQuery tooltip
                // note element is a jqLite object with jQuery methods available
                // DO NOT ATTEMPT TO WRAP element WITH jQuery
                // ANGULAR CANNOT TRACK jQuery OBJECTS THAT
                //   ARE NOT WRAPPED WITH jqLite!!!
                element.tooltip(...);
            }
        };
    });

【讨论】：