0

We are building an interface with angular and jquery ui over a Chromium browser. Our issue is we are required to use $timeout for differing our jquery ui calls in angular link method unless getting rendering/loading issues. We are using require js for loading our js files. Here an example with a button directive (same issues with all of our directives):

Button template

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

Button directive

The code below doesn't work without timeout. jQuery ui call is ineffective and element.find() doesn't find anything.... 

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);
    }
}
}]);
});

root 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>

Data-main from 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']);
        }); 
});

Thank you in advance for your help guys!

Maxime Helen
  • 1,382
  • 7
  • 16
  • Why are you adding jquery? Angularjs comes with jqLite that contains pretty much everything you need from jquery. If you think you need more jquery functionality then you are thinking too much like a jquery developer and not an angular developer! http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – Tone Feb 27 '15 at 09:05
  • 1
    You should also change this `$("#" + scope.id + '-button');` to `element.find("#" + scope.id + '-button');` Avoid using $ selectors in a Directive – Tone Feb 27 '15 at 09:26
  • Thank you Tone, now the issue changed. Please take a look of the post update above – Maxime Helen Feb 28 '15 at 17:59

1 Answers1

1

From first look, I'd say your module order is wrong, angular would need to come after jquery, which is why after a delay it works. Jquery needs to be loaded before angular. Try that and let me know.

Mikey0000
  • 96
  • 3
  • Ok I managed to load jquery first, you can see the update in the post upper. There's no errors threw by the console, but now jquery ui calls don't work at all. Only the ugly html is rendered. In fact link is called before the html is rendered. So element.find("#" + scope.id + '-button') doesn't find anything, except if we apply a timeout – Maxime Helen Feb 28 '15 at 00:37