Utilisation d'une directive

Je sollicite par le biais du forum de l'aide pour résoudre un problème d'affichage du contenu HTML suite à l'utilisation d'une directive dans angularJS. Pour rappel l'affichage fonctionne correctement en manipulant les élements du DOM dans le contrôleur. Malheureusement cette la manipulation des éléments du DOM dans un contrôleur n'est pas compatible avenc la logique d'angularJS. Je pense que le problème viendrait de l'implémentation de la directive. Quelqu'un pourrait-il suggérer une autre implémentation de la directive? Le code source est présenté ci-dessous. Merci d'avance pour toute aide.

Voici l'implémentation du contrôleur:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
define(['app', 'ngload!appCommonServices', 'ngload!appDataModelService', 'ngload!goldenRootCategDirective'], function (app) {
    'use strict';
 
    app.register.controller('RootCategoriesController', ['$rootScope', '$scope', '$window', '$location', 'AppCommonServices', 'AppDataService',
        function ($rootScope, $scope, $window, $location, AppCommonServices, AppDataService)
     {
        /*=========================== Data members ================================*/
        $scope.noProdMessage = $rootScope.getLocalizedString("_NoProductMessage_");
        $scope.imageServerPath = $rootScope.appInfo.imageServerPath;
        $scope.storedData = AppDataService.loadFromStorage($rootScope.appConfig.rootCategStoragekey);
        $scope.topData = [];
        $scope.bottomData = [];
        $scope.objIndic = {
            isWrapper1: false, isWrapper2: false, isWrapper3: false, isWrapper4: false, isWrapper5: false, isWrapper6: false,
            isWrapper7: false, isWrapper8: false, isWrapper9: false, isWrapper10: false
        };
        //========================= Event Handlers =================================//
        $scope.$watch('storedData', function (newValue, oldValue) {
            //Check if locally stored data exist, otherwise reload data from remote server
            if (angular.isArray($scope.storedData) && $scope.storedData.length === 0) {
                loadingData();
            }
            else {
                doSlider();
            }
        });
 
        //========================= Methods =======================================//
        $scope.formatCurrency = function (currency, value) {
            return " - " + AppCommonServices.formatCurrency(currency, value);
        }
 
        $scope.getDescription = function (content) {
            return content.length > 80 ? content.substr(0, 80) + " ..." : content;
        }
 
        function loadingData() {
            var data = {
                skip: 0,
                maxAmountOfProducts: $rootScope.appInfo.maxAmountOfItems,
                countryCode: $rootScope.appInfo.countryCode,
                userLng: $rootScope.appInfo.shortLanguage
            }
 
            AppDataService.ajaxGetWithData(data, "api/Category/GetCategDealProdAsync", populateRootCategories, loadingAppInitDataError);
        }
 
        function doSlider() {
            var categData = {};
            var messageNoProd = '';
 
            $.each($scope.storedData.CategoryKeyValues, function (index, value) {
                messageNoProd = '';
 
                categData = $scope.storedData.CategoryData[value];
                switch (index) {
                    case 0:
                        if (categData.Products !== null && categData.Products.length > 0) {
                            $scope.objIndic.isWrapper1 = true;
                        }
                        else {
                            messageNoProd = $scope.noProdMessage;
                        }
                        $scope.topData.push({ data: categData, message: messageNoProd });
                        break;
                    case 1:
                        if (categData.Products !== null && categData.Products.length > 0) {
                            $scope.objIndic.isWrapper2 = true;
                        }
                        else {
                            messageNoProd = $scope.noProdMessage;
                        }
                        $scope.topData.push({ data: categData, message: messageNoProd });
                        break;
                    case 2:
                        if (categData.Products !== null && categData.Products.length > 0) {
                            $scope.objIndic.isWrapper3 = true;
                        }
                        else {
                            messageNoProd = $scope.noProdMessage;
                        }
                        $scope.topData.push({ data: categData, message: messageNoProd });
                        break;
                    case 3:
                        if (categData.Products !== null && categData.Products.length > 0) {
                            $scope.objIndic.isWrapper4 = true;
                        }
                        else {
                            messageNoProd = $scope.noProdMessage;
                        }
                        $scope.topData.push({ data: categData, message: messageNoProd });
                        break;
                    case 4:
                        if (categData.Products !== null && categData.Products.length > 0) {
                            $scope.objIndic.isWrapper5 = true;
                        }
                        else {
                            messageNoProd = $scope.noProdMessage;
                        }
                        $scope.topData.push({ data: categData, message: messageNoProd });
                        break;
                    case 5:
                        if (categData.Products !== null && categData.Products.length > 0) {
                            $scope.objIndic.isWrapper6 = true;
                        }
                        else {
                            messageNoProd = $scope.noProdMessage;
                        }
                        $scope.bottomData.push({ data: categData, message: messageNoProd });
                        break;
                    case 6:
                        if (categData.Products !== null && categData.Products.length > 0) {
                            $scope.objIndic.isWrapper7 = true;
                        }
                        else {
                            messageNoProd = $scope.noProdMessage;
                        }
                        $scope.bottomData.push({ data: categData, message: messageNoProd });
                        break;
                    case 7:
                        if (categData.Products !== null && categData.Products.length > 0) {
                            $scope.objIndic.isWrapper8 = true;
                        }
                        else {
                            messageNoProd = $scope.noProdMessage;
                        }
                        $scope.bottomData.push({ data: categData, message: messageNoProd });
                        break;
                    case 8:
                        if (categData.Products !== null && categData.Products.length > 0) {
                            $scope.objIndic.isWrapper9 = true;
                        }
                        else {
                            messageNoProd = $scope.noProdMessage;
                        }
                        $scope.bottomData.push({ data: categData, message: messageNoProd });
                        break;
                    case 9:
                        if (categData.Products !== null && categData.Products.length > 0) {
                            $scope.objIndic.isWrapper10 = true;
                        }
                        else {
                            messageNoProd = $scope.noProdMessage;
                        }
                        $scope.bottomData.push({ data: categData, message: messageNoProd });
                        break;
                }
            });
 
            //Subscribe event handlers
            $rootScope.eventHandlers.currentViewHandler = $rootScope.$broadcast($rootScope.eventConfig.currentViewEventAwareness, $rootScope.currentView);
 
 
        }
 
        function populateRootCategories(response, status) {
            //Storage data to localStorage
            AppDataService.saveToStorage($rootScope.appConfig.rootCategStoragekey, response);
            $scope.storedData = response;
        }
 
        function loadingAppInitDataError(response, status) {
            $location.path('/error/501', true);
        }
 
    }]);
});

Voici l'implementation de la directive:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
define(['app', 'ngload!wowslider', 'ngload!scriptslider'], function (app) { 
    "use strict";
 
    app.register.directive('goldSlider', function () {
        var glSlider = {};
 
        glSlider.restrict = 'E';
        glSlider.controller = 'RootCategoriesController';
        glSlider.replace = true;
        glSlider.template =
            '<div class="row">' +
                '<div class="col-md-2-1" ng-repeat="item in topData">' +
                    '<article>' +
                        '<div class="category-header">' +
                            '<a id="header{{item.data.OrderNumber}}" class="rootcategory" href="#/categories/{{item.data.CategoryID}}"></a>' +
                        '</div>' +
                        '<div id="ws-wrapper{{item.data.OrderNumber}}" class="ws-wrapper">' +
                        '<div class="ws_images">' +
                            '<ul ng-if="item.data.Products.length" id="ws_images{{item.data.OrderNumber}}">' +
                                '<li ng-repeat="entry in item.Products">' +
                                    '<a id="{{entry.ProductID}}" href=""><img src="{{imageServerPath}}{{entry.ImageUri}}" alt="{{entry.ProductName}}{{formatCurrency(entry.Currency, entry.UnitPrice)}}" title="{{entry.ProductName}}{{formatCurrency(entry.Currency, entry.UnitPrice)}}" /></a>' +
                                '</li>' +
                            '</ul>' +
                            '<p ng-if="!item.data.Products.length">{{noProdMessage}}</p>' +
                        '</div>' +
                    '</article>' +
                '</div>' +
            '</div>' +
            '<div class="row">' +
                '<div class="col-md-2-1" ng-repeat="item2 in bottomData">' +
                    '<article>' +
                        '<div class="category-header">' +
                            '<a id="header{{item2.data.OrderNumber}}" class="rootcategory" href="#/categories/{{item2.data.CategoryID}}"></a>' +
                        '</div>' +
                        '<div id="ws-wrapper{{item2.data.OrderNumber}}" class="ws-wrapper">' +
                        '<div class="ws_images">' +
                            '<ul ng-if="item2.data.Products.length" id="ws_images{{item2.data.OrderNumber}}">' +
                                '<li ng-repeat="entry2 in item2.Products">' +
                                    '<a id="{{entry2.ProductID}}" href=""><img src="{{imageServerPath}}{{entry2.ImageUri}}" alt="{{entry2.ProductName}}{{formatCurrency(entry2.Currency, entry2.UnitPrice)}}" title="{{entry2.ProductName}}{{formatCurrency(entry2.Currency, entry2.UnitPrice)}}" /></a>' +
                                '</li>' +
                            '</ul>' +
                            '<p ng-if="!item2.data.Products.length">{{noProdMessage}}</p>' +
                        '</div>' +
                    '</article>' +
                '</div>' +
            '</div>';
        glSlider.scope = {};
        glSlider.link = function (scope, element, attrs, rootCategoriesCtrl) {
 
            scope.imageServerPath = rootCategoriesCtrl.imageServerPath;
            scope.noProdMessage = rootCategoriesCtrl.noProdMessage;
            scope.topData = rootCategoriesCtrl.topData;
            scope.bottomData = rootCategoriesCtrl.bottomData;
            scope.objIndic = rootCategoriesCtrl.objIndic;
 
            scope.applyPlugin();
 
            scope.formatCurrency = function (currency, value) {
                return " - " + rootCategoriesCtrl.formatCurrency(currency, value);
            }
 
            scope.applyPlugin = function () {
                var script = document.createElement("script");
                script.type = "text/javascript";
 
                if (objIndic.isWrapper1) {
                    script.text = script.text + 'jQuery("#ws-wrapper1").wowSlider({ effect:"cube",prev:"",next:"",duration:50*100,delay:50*100,width:232,height:235,autoPlay:true,autoPlayVideo:false,playPause:false,stopOnHover:true,loop:false,bullets:0,caption:true,captionEffect:"parallax",controls:true,responsive:1,fullScreen:false,gestures:1,onBeforeStep:0,images:0 });';
                }
                if (objIndic.isWrapper2) {
                    script.text = script.text + 'jQuery("#ws-wrapper2").wowSlider({ effect:"cube",prev:"",next:"",duration:50*100,delay:50*100,width:232,height:235,autoPlay:true,autoPlayVideo:false,playPause:false,stopOnHover:true,loop:false,bullets:0,caption:true,captionEffect:"parallax",controls:true,responsive:1,fullScreen:false,gestures:1,onBeforeStep:0,images:0 });';
                }
 
                if (objIndic.isWrapper3) {
                    script.text = script.text + 'jQuery("#ws-wrapper3").wowSlider({ effect:"cube",prev:"",next:"",duration:50*100,delay:50*100,width:232,height:235,autoPlay:true,autoPlayVideo:false,playPause:false,stopOnHover:true,loop:false,bullets:0,caption:true,captionEffect:"parallax",controls:true,responsive:1,fullScreen:false,gestures:1,onBeforeStep:0,images:0 });';
                }
 
                if (objIndic.isWrapper4) {
                    script.text = script.text + 'jQuery("#ws-wrapper4").wowSlider({ effect:"cube",prev:"",next:"",duration:50*100,delay:50*100,width:232,height:235,autoPlay:true,autoPlayVideo:false,playPause:false,stopOnHover:true,loop:false,bullets:0,caption:true,captionEffect:"parallax",controls:true,responsive:1,fullScreen:false,gestures:1,onBeforeStep:0,images:0 });';
                }
 
                if (objIndic.isWrapper5) {
                    script.text = script.text + 'jQuery("#ws-wrapper5").wowSlider({ effect:"cube",prev:"",next:"",duration:50*100,delay:50*100,width:232,height:235,autoPlay:true,autoPlayVideo:false,playPause:false,stopOnHover:true,loop:false,bullets:0,caption:true,captionEffect:"parallax",controls:true,responsive:1,fullScreen:false,gestures:1,onBeforeStep:0,images:0 });';
                }
 
                if (objIndic.isWrapper6) {
                    script.text = script.text + 'jQuery("#ws-wrapper6").wowSlider({ effect:"cube",prev:"",next:"",duration:50*100,delay:50*100,width:232,height:235,autoPlay:true,autoPlayVideo:false,playPause:false,stopOnHover:true,loop:false,bullets:0,caption:true,captionEffect:"parallax",controls:true,responsive:1,fullScreen:false,gestures:1,onBeforeStep:0,images:0 });';
                }
 
                if (objIndic.isWrapper7) {
                    script.text = script.text + 'jQuery("#ws-wrapper7").wowSlider({ effect:"cube",prev:"",next:"",duration:50*100,delay:50*100,width:232,height:235,autoPlay:true,autoPlayVideo:false,playPause:false,stopOnHover:true,loop:false,bullets:0,caption:true,captionEffect:"parallax",controls:true,responsive:1,fullScreen:false,gestures:1,onBeforeStep:0,images:0 });';
                }
 
                if (objIndic.isWrapper8) {
                    script.text = script.text + 'jQuery("#ws-wrapper8").wowSlider({ effect:"cube",prev:"",next:"",duration:50*100,delay:50*100,width:232,height:235,autoPlay:true,autoPlayVideo:false,playPause:false,stopOnHover:true,loop:false,bullets:0,caption:true,captionEffect:"parallax",controls:true,responsive:1,fullScreen:false,gestures:1,onBeforeStep:0,images:0 });';
                }
 
                if (objIndic.isWrapper9) {
                    script.text = script.text + 'jQuery("#ws-wrapper9").wowSlider({ effect:"cube",prev:"",next:"",duration:50*100,delay:50*100,width:232,height:235,autoPlay:true,autoPlayVideo:false,playPause:false,stopOnHover:true,loop:false,bullets:0,caption:true,captionEffect:"parallax",controls:true,responsive:1,fullScreen:false,gestures:1,onBeforeStep:0,images:0 });';
                }
 
                if (objIndic.isWrapper10) {
                    script.text = script.text + 'jQuery("#ws-wrapper10").wowSlider({ effect:"cube",prev:"",next:"",duration:50*100,delay:50*100,width:232,height:235,autoPlay:true,autoPlayVideo:false,playPause:false,stopOnHover:true,loop:false,bullets:0,caption:true,captionEffect:"parallax",controls:true,responsive:1,fullScreen:false,gestures:1,onBeforeStep:0,images:0 });';
                }
 
                document.body.appendChild(script);
            }
        };
        return glSlider;
    });
});

Voici le contenu HTML:

Code:

1
2
3
<div id="rootcategories" class="content-jump" ng-controller="RootCategoriesController">
    <gold-slider></gold-slider>
</div>