Home/ Questions/Q 8990169
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T22:26:30+00:00

I wish to make my own web elements – for example, this is a

  • 0

I wish to make my own web elements – for example, this is a simple graphics element:

var app = angular.module('myApp', []);

app.directive('gx', function(){
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {w: '@',
            h: '@'},
    template: '<svg class="gx" ng-transclude></svg>',

    controller: function ($scope, $element) {
      var children = $scope.children = [];
      this.addChild = function (c) {
        children.push(c);
      };
    },
    link: function (scope, element, attrs, gxCtrl){
      if (gxCtrl) gxCtrl.addChild(scope);
      scope.$watch('w+h', function(val){
        var w = scope.w||"100%",
            h = scope.h||"100%";
        $(element).attr("height", h).attr("width", w);
      });
    }
  };
});

when I declare it in my page, I have to use

<html ng-app="myApp">

is it possible to install it as a default directive, so that I can just include the .js file and start using html elements without having to specify the ‘myApp’ name – the same way as all the ng directives?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One of AngularJS core features is modularity. You can create a directives module in a separate file and add directives to it.

    angular.module('directives',[])
.directive('gx', function(){
  return {/** directive definition object **/ };
});

    Define the module into directives.js and your app into app.js

    <script src="directives.js"></script>
<script src="app.js"></script>

    Then inject the directives module into your app

    var app = angular.module('myApp', ['directives']);

    Example: http://plnkr.co/edit/OgNr4Qx3SBbWwcH9NSfu?p=preview

    • 0