Using Angular Directives in external js files

Question

I am using CoffeeScript. I have created a directive to warp a jquery ui datepicker control. I want to be able to use this directive in multiple controllers however I can only get it to work if I add it to every coffeescript file for each view I use as shown below.

$ = jQuery

adminApp = angular.module("adminApp", [])

adminApp.controller "OrganizationCreateCtrl", ($scope) ->

    $scope.create = () ->
        $.ajax 'CreateOrganization',
            type: 'POST'
            dataType: 'json'
            data:
                organizationName: $scope.orgName

            error: (jqXHR, textStatus, errorThrown) ->
                $scope.success = ''
                $scope.isSuccess = false
                $scope.error = 'Could not generate Organization'
                $scope.isError = true
                $scope.$apply()
            success: (data, textStatus, jqXHR) ->
                if data.Success is true
                    $scope.success = 'Organization Created Succefully.  Organization ID: ' + data.Id
                    $scope.isSuccess = true
                    $scope.isError = false
                    $scope.error = ''
                    $scope.$apply()
                else
                    $scope.success = ''
                    $scope.isSuccess = false
                    $scope.error = 'Could not generate Organization'
                    $scope.isError = true
                    $scope.$apply()

adminApp.directive 'datepicker', ->

    restrict: 'A'
    require: 'ngModel',
    link: (scope, element, attrs, ngModelCtrl) ->
        $ ->
            element.datepicker
                dateFormat: "yy-mm-dd"
                onSelect: (date) ->
                    ngModelCtrl.$setViewValue date
                    scope.$apply()

I want to be able to use this directive without including it in every controller I create but can't seem to get it to work.

I would like to create an external coffeescript file with just the directive and use it on the view page that this coffeescript applies to but can't seem to get it to work.

Again this seems like it should be easy but nothing I've tired has worked despite searching for the answer a great length.

Bottom line, how can I more the directive to an external coffeescript file and use it in any controller in my application rather than having to have to add it to every controller file I create.

sjy · Accepted Answer · 2014-01-30 01:19:07Z

2

Have a look at how modularisation is done in angular-seed. The index.html includes separate <script> tags:

<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
...
<script src="js/directives.js"></script>

Each file creates an app submodule using angular.module, for example see directives.js (I've translated to CoffeeScript):

angular.module 'myApp.directives', []
  .directive 'appVersion', ['version', (version) ->
    return (scope, elm, attrs) ->
      elm.text version

app.js is included first, and it declares its dependencies on each submodule:

# Declare app level module which depends on filters, and services
angular.module 'myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]

answered Jan 30, 2014 at 1:19

sjy

2,7421 gold badge23 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Angular Directives in external js files

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related