Access custom control in angular js

Question

I'm working on html and angular js for test project to learn angular js.

I've developed one custom input control for masking in html (http://teena.aaadev.info/platform/controls/textbox.html), it's working perfectly. Now I want to use that control in another html page, something like this way:

<div my-control="textbox"></div>

OR

<div my-control="textbox.html"></div>

Once the above code run or viewed in web browser, it'll automatically load the textbox control in that div which inherits all the functionalities of that control. This is the basic thing I need. Afterwards I'm planning for passing the attributes or options for that controls to pick up right format of control.

I've used the following code but it's not working and showing a blank page:

<div ng-include="'text.html'"></div>

I heard about Routing & Multiple Views (https://docs.angularjs.org/tutorial/step_07), is this helpful to achieve my requirements??

Thanks!

Please be sure when you post that you aren't creating new overly broad tags (like the tag "custom"). Thanks! — Maximillian Laumeister
– Maximillian Laumeister, Commented Dec 16, 2015 at 19:34

abeach3 · Accepted Answer · 2015-12-16 19:59:56Z

1

If you want to use separate pages, then definitely use the routing & multiple views tutorial.

In Henry's jsbin example you can define your directive as

textboxApp.directive('myTextbox', [function () { 
   return {
      restrict: 'A',
      scope: {mask: '@'},  // add other variables here
      controller: 'textboxController',
      templateUrl: 'textbox.html'
}]);

Where textbox.html looks something like this

<h3>mask="{{mask}}"</h3>
<input id="{{mask}}" type="text"
       ng-focus="focusInNumber($event)" 
       ng-blur="focusOutNumber($event)" 
       ng-keypress="checkNumer($event)" />

Here's more on directives - I found this pretty useful when I was first learning.

Then, some file like index.html will have the angular app setup that is currently in textbox.html.

<div my-textbox mask="none"></div>
<div my-textbox mask="thousand"></div>
<div my-textbox mask="currency"></div>

edited Dec 16, 2015 at 19:59

answered Dec 16, 2015 at 16:59

abeach3

365 bronze badges

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

7 Comments

immayankmodi Over a year ago

Thanks for the answer. I did tried this way but It seems to be it's not applying to my main html file. I've prepared a demo, please check if you can figure it out: teena.aaadev.info/platform/routes/index.html

abeach3 Over a year ago

You have two modules that do not know about each other, which is why the directive cannot find textboxController. Try getting rid of var testApp = angular.module('testApp', []), changing testApp.directive to textboxApp.directive, and changing the order you import your scripts textbox.js, then test.js. Also, change ng-app="textboxApp".

immayankmodi Over a year ago

I think it did the trick and very closer to get my goal. But still having issue like, not getting {{mask}} model value and also some errors to get the event target length, event key code etc. Changes uploaded to server to check if you can help me on this, thanks!

abeach3 Over a year ago

{{mask}} is actually my fault, it should be scope: {mask: '@'}. Did not have time to look at the event issue but check Angular's docs for ng-keydown.

immayankmodi Over a year ago

Both issue got resolve. For event issue, I forgot to pass myFucntion($event) parameter. now it's working but after that one more issue raise is I'm not able to write anything in textbox. For this issue I guess something need to check with my existing scripts. Thanks for your help. You're genius!

|

Henry Zou · Accepted Answer · 2015-12-16 16:23:27Z

1

What you want to do is to create directives (re-usable html components) instead of creating a controller for your page. The directives themselves are portable and that's where your event handler logic should be.

I've created a jsbin stripped down version of your code for you to play with. All you need is to have "my-textbox" attribute in order to inherit the behavior (it doesn't even need to be on .

<input type="text" my-textbox ng-blur="blur($event)">

http://jsbin.com/hibufiwuxi/edit?html,js,output

answered Dec 16, 2015 at 16:23

Henry Zou

1,9271 gold badge14 silver badges19 bronze badges

2 Comments

immayankmodi Over a year ago

I did tried this way but It seems to be it's not applying to my main html file. I've prepared a demo, please check if you can figure it out: teena.aaadev.info/platform/routes/index.html

immayankmodi Over a year ago

Got issue resolved with the combination of @abeach3 and yours, thanks!

Collectives™ on Stack Overflow

Access custom control in angular js

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related