Geek Answers Handbook

Bind javascript method in Angularjs template

My application uses Angularjs on the client side. I have five directives that use the same logic. The following is my code details.

  • I have one pure javascript class since AppUtilities.js has the following method

    var AppUtilities = { //Get the guid for given collection getGUID: function (collectionName) { var prefix; var guid; //get first two character if (!Utilities.isEmpty(collectionName)) { prefix = collectionName.substring(0, 2); //Get timestamp var timestamp = Utilities.getTimestampId(); //concate prefix to get the guid guid = prefix + timestamp; } return guid; } };

  • I have five different directives in which I need to use the getGUID () method to bind to a template. Since the template can only be associated with the scope function, so I defined the scope method in all of these five templates below

     scope.getGUID = function (collectionName) { return AppUtilities.getGUID(collectionName); }

  • Then, in all five directive templates, this method is bound as a scope variable

     <h4 class="guid" id="guid" data-ng-bind-template="{{getGUID('goal')}}"></h4>

How can I avoid declaring this method as a scope variable and directly use AppUtilities.getGUID(collectionName) in the HTML template?

+5
source share
3 answers

There are several ways, but to be honest, this seems like more effort than its value, as you can simply do:

 scope.getGUID = AppUtilities.getGUID;

Of course, you can use $rootScope , but for me it personally seems wrong - I like it when things are explicitly declared and do not magically appear.

Alternatively, if you just need to display the GUID in the user interface, create a GUID directive. For instance:

 .directive("guid", function(){ return { template: "<span>{{getGUID()}}</span>", link: function(scope, element, attrs){ scope.getGUID = function(){ return AppUtilities.getGUID(attrs.guid || attrs.name); }; } } });

and use as:

 <h4 class="guid"><guid name="goal"></guid></h4>
+2
source

Without manipulating individual areas or the root area, you can simply define a filter that can be used in all templates. Please note that for all good reasons, I still define and insert AppUtilities , even if it is global, as it is its own service.

 app.filter('toGUID', ['AppUtilities', function (AppUtilities) { return function (input) { return AppUtilities.getGUID(input); }; }]); // <pre>{{ 'goal'|toGUID }}</pre> app.service('AppUtilities', function () { return AppUtilities; }); 

 (function (app, ng) { 'use strict'; app.filter('toGUID', ['AppUtilities', function (AppUtilities) { return function (input) { return AppUtilities.getGUID(input); }; }]); app.service('AppUtilities', function () { return AppUtilities; }); var Utilities = { isEmpty: function (collectionName) { return false; }, getTimestampId: function () { return '_something'; } }; var AppUtilities = { //Get the guid for given collection getGUID: function (collectionName) { var prefix; var guid; //get first two character if (!Utilities.isEmpty(collectionName)) { prefix = collectionName.substring(0, 2); //Get timestamp var timestamp = Utilities.getTimestampId(); //concat prefix to get the guid guid = prefix + timestamp; } return guid; } }; })(angular.module('app', []), angular); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script> <div data-ng-app="app"> <pre>{{ 'goal'|toGUID }}</pre> </div>
+2
source

Hide it in div:

 <div id="hidden" data-ng-model="hidden" style="display:none"></div> <script> $('#hidden').html(AppUtilities.getGUID(collectionName)); </script>

Then ng-bind to the content div:

 <div id="realDiv" data-ng-bind-html="hidden"></div>
0
source

More articles:


All Articles