$timeout用于呈现带有angular的jquery ui项

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

按钮模板

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

按钮指令

如果没有超时，下面的代码将无法工作。jQueryui调用无效，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.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']);
        }); 
});

提前感谢你们的帮助！

乍一看，我认为您的模块顺序是错误的，angular需要在jquery之后出现，这就是为什么延迟后它可以工作的原因。Jquery需要在angular之前加载。试试看，让我知道。

相关内容

最新更新

热门标签：