$(document).ready 和 $scope.$on('$viewContentLoaded', function() {...}) 的组合答案

【问题标题】：Combination of $(document).ready and $scope.$on('$viewContentLoaded', function() {...})$(document).ready 和 $scope.$on('$viewContentLoaded', function() {...}) 的组合
【发布时间】：2014-03-31 02:24:03
【问题描述】：

我在view 的AngularJS/JQuery 应用程序中使用JQuery UI 组件。

我的JavaScript 代码中需要这样的东西（不起作用）：

$(document).ready(function () {

    var elem = $('div[ng-view]')[0];
    var $scope = angular.element(elem).scope();

    $scope.$on('$viewContentLoaded', function() {

          // multiple JQuery statements
          // to support JQuery-UI componenets

    });
});

此代码作为<script> 包含在具有<div class="container" ng-view> 元素的index.html 中。

我的想法是我们需要一个两步过程：

首先 JQuery 对文档就绪的 HTML 事件做出反应，并使用使用 [ng-view] 元素检索到的 $scope 将侦听器附加到 Angular 的 $viewContenLoaded。
然后每次加载视图时，我的 JQuery 代码都会被执行，JQuery UI 组件会被激活和连接。

显然我的逻辑在某处有缺陷。请指出正确的方向。

附加信息（2014 年 3 月 31 日发布）：

我的其余代码（控制器、服务、路由）是用TypeScript 编写的。

【问题讨论】：

或者你可以把你的jQuery代码放在角度指令中。 jQuery UI 初始化代码可以放在指令的链接函数中。
是的，我将研究指令，但同时需要一些工作。我刚开始接触 JavaScript 及其工具，所以我还没有涵盖大部分内容。
如果您打算采用渐进的方法，那么您可以在控制器中添加 jQuery 初始化代码，但要知道您需要将其移动到指令中以允许您单元测试你的控制器。运行单元测试时，您不希望任何东西直接与控制器中的 DOM 相关联。
我的控制器代码写在TypeScript。我找不到 JQuery UI's 官方（即保证有效）定义。
我没有使用过 TypeScript，所以我不会在那里提供任何帮助，我建议发布一个新问题。

标签： javascript jquery html angularjs jquery-ui

【解决方案1】：

需要编译该元素才能将 angulars 范围绑定到该元素。您可以尝试以下方法：

var scope = angular.injector(['ng']).get('$rootScope').$new();
var compile = angular.injector(['ng']).get('$compile');
compile(elem)(scope);
scope.$on('$viewContentLoaded', function(){

// Your code

});

虽然我建议将您的代码放在指令中。我上面显示的代码只不过是一个 hack 和危险的，因为现在你可以全局访问你的服务。

【讨论】：

我是否保留我的var elem = $('div[ng-view]')[0];？如果不是，elem 来自哪里？
elem，可以是 html 的字符串表达式或 jquery/ jqlite 元素本身。
它应该像那样工作。就我个人而言，我没有测试过我给你的代码，但从文档和所有内容来看，我认为它应该可以工作。
不幸的是没有为我工作。我想我必须硬着头皮学习指令。