使用角度渲染 jquery ui 项目所需的 $timeout答案

【问题标题】：$timeout required for rendering jquery ui items with angular使用角度渲染 jquery ui 项目所需的 $timeout
【发布时间】：2015-02-27 02:36:39
【问题描述】：

我们正在 Chromium 浏览器上构建一个带有 angular 和 jquery ui 的界面。我们的问题是，除非出现渲染/加载问题，否则我们需要使用 $timeout 来在角度链接方法中对我们的 jquery ui 调用进行不同的调用。我们正在使用 require js 来加载我们的 js 文件。这是一个带有按钮指令的示例（我们所有的指令都存在相同的问题）：

按钮模板

<button id="{{id + '-button'}}" ></button>

按钮指令

如果没有超时，下面的代码将无法运行。 jQuery ui 调用无效并且 element.find() 没有找到任何东西....

require(['angular'], function(angular) {
angular.module('viewerApp')
.controller('buttonController', ['$scope', function($scope) {

}])
.directive('flbutton', ['$timeout', function($timeout) {
return {
    restrict: 'EA',
    controller: 'buttonController',
    templateUrl: '../UI_HTML/lib/ui/buttonTemplate.html',
    scope: {
        id: '@buttonid',
        callback: '@',
        title: '@',
        icon: '@' // icon cannot be an image file, it must be
                  // a jQuery UI icon class (e.g. 'ui-icon-locked')
    },
    link: function(scope, element, attrs, parentCtrl) {
        $timeout(function() {
            var params = {
                label: scope.title,
                icons: {primary: scope.icon}
            }
            scope.buttonEl = element.find("#" + scope.id + '-button');
            // scope.buttonEl.button(params).click(function(event) {
            //  scope.callback.call(this);
            //  event.preventDefault();
            // })
        }, 100);
    }
}
}]);
});

根 HTML

<html>
<head>
<script data-main="require-config" src="../UI_HTML/lib/requirejs/require.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body oncontextmenu="return false" style="margin: 0px;" ng-controller="ViewerCtrl">
<flbutton buttonid="playButton" title="Play" icon="ui-icon-play" fltooltip text="Run Script"></flbutton>
</body>
</html>

来自 require 的数据主干

require.config({
    paths: {
        angular: '../UI_HTML/lib/angular/angular',
        'angular-route': '../UI_HTML/lib/angular-route/angular-route',
        ui: '../UI_HTML/lib/ui',
        common: '../HTML_COMMON',
        lib: '../UI_HTML/lib',
        jquery: '../UI_HTML/lib/jquery-2.0.3.min',
        'jquery-ui': '../UI_HTML/lib/jquery-ui-1.9.2.min',
        domReady: '../UI_HTML/lib/domReady'
    },
    shim: {
        'angular': { 
            exports: 'angular'
        },
        'angular-route': {deps:['angular']},
        'lib/jquery.terminal': {
            deps: ['jquery']
        },
        'lib/jquery.pnotify': {
            deps: ['jquery']
        }
    },
    priority: [
        'angular'
    ]
});

define(['jquery', 'angular', 'app'], 
    function($, angular, app) {
        // tell angular to wait until the DOM is ready
        // before bootstrapping the application
        require(['domReady'], function() {
            angular.bootstrap(document, ['viewerApp']);
        }); 
});

提前感谢你们的帮助！

【问题讨论】：

你为什么要添加jquery？ Angularjs 带有 jqLite，它包含了你从 jquery 中需要的几乎所有东西。如果您认为您需要更多 jquery 功能，那么您的想法太像 jquery 开发人员而不是 angular 开发人员！ stackoverflow.com/questions/14994391/…
您还应该将这个$("#" + scope.id + '-button'); 更改为element.find("#" + scope.id + '-button'); 避免在指令中使用$ 选择器
谢谢你的语气，现在问题改变了。请看上面的帖子更新

标签： angularjs jquery-ui angularjs-directive requirejs timeout

【解决方案1】：

从第一眼看，我会说你的模块顺序是错误的，角度需要在 jquery 之后，这就是为什么延迟后它可以工作的原因。 Jquery 需要在 Angular 之前加载。试试看，然后告诉我。

【讨论】：

好吧，我设法先加载了 jquery，你可以在上面的帖子中看到更新。控制台没有抛出任何错误，但现在 jquery ui 调用根本不起作用。只呈现丑陋的 html。实际上链接是在呈现 html 之前调用的。所以 element.find("#" + scope.id + '-button') 没有找到任何东西，除非我们应用超时