Angular Custom Directive Not Being Intiatied

Question

Sortable not being called and console log is not displaying. There are no errors in the console.

Here is the code I have.

jga-directive.js

(function() {
angular
    .module('jgaDirectives', [])
    .directive('jgaSortable', jgaSortable);

 function jgaSortable() {

    console.log("test");

    function linker(scope, element, attr) {
        var start = -1;
        var end = -1;
        element.sortable({
            start: function(event, ui) {
                start = $(ui.item).index();
            },
            stop: function(event, ui) {
                end = $(ui.item).index();
                scope.sortableController.sort(start, end);
            }
        });
    }

    return {
        scope: {},
        restrict: C,      
        link: linker,
        controller: sortableController,
        controllerAs: 'sortableController'
    }

    function sortableController(WidgetService) {
        var vm = this;
        vm.sort = sort;

        function sort (start, end) {

        }
    }
}

})();

app.js

(function () {
    angular.module('WebAppMaker', ['ngRoute', 'jgaDirectives'])})();

widget.-list.view.client.html

<div class="jga-sortable" ng-repeat="widget in model.widgets">
    <div ng-switch="widget.widgetType">
        <div ng-switch-when="HEADER">
            <div ng-include src="'views/widget/widget-heading.view.client.html'"></div>
        </div>
        <div ng-switch-when="IMAGE">
            <div ng-include src="'views/widget/widget-image.view.client.html'"></div>
        </div>
        <div ng-switch-when="YOUTUBE">
            <div ng-include src="'views/widget/widget-youtube.view.client.html'"></div>
        </div>
    </div>
</div>

index.html

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Assignment</title>

        <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script

        <link rel="stylesheet" href="../js/jquery-ui.css">
        <script src="../js/jquery.js"></script>
        <script src="../js/jquery-ui.js"></script>

        <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
        <link href="../css/full-width-pics.css" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css"/>


        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>

        <script src="app.js"></script>
        <script src="config.js"></script>
        <script src="directives/jga-directives.js"></script>

        <!-- controllers -->
        <script src="views/user/user.controller.client.js"></script>
        <script src="views/website/website.controller.client.js"></script>
        <script src="views/page/page.controller.client.js"></script>
        <script src="views/widget/widget.controller.client.js"></script>

        <!-- services -->
        <script src="services/user.service.client.js"></script>
        <script src="services/website.service.client.js"></script>
        <script src="services/page.service.client.js"></script>
        <script src="services/widget.service.client.js"></script>     
    </head>

Does anyone know why this issue would be occurring?

Did you tried to put srcipt block which loading directives before you load app.js (with AngularJS module which depends on directive module)? IF you put debugger in app and in directives file do you stop on them? — Sharikov Vladislav, Nov 06 '16 at 22:16
It seems the name of your directive file is incorrect. Is it 'jga-directive.js' or 'jga-directives.js' (in your — MoMo, Nov 06 '16 at 22:30
@OmriAharon I just tried that change and it makes no difference — mloomis, Nov 06 '16 at 22:46
@mloomis, your directive's function definition (function jgaSortable()) seems odd. Make a minor adjustment and declare it as: (function() { angular .module('jgaDirectives', []) .directive('jgaSortable', jgaSortable, function jgaSortable() { ... }. This is probably why your function is never called. BTW, the plunkr for proper directive definitionvfrom AJS' website is: https://plnkr.co/edit/?p=preview — MoMo, Nov 06 '16 at 23:02
@mloomis you are trying to load angular file more than once. You have included __ as well as __ — Pitchiah Natarajan, Nov 07 '16 at 07:26

Angular Custom Directive Not Being Intiatied

0 Answers0