javascript - Passing Attribute Value to Directive Template -


end goal

we'd have attribute can add element associate contextual dialog when hover mouse cursor on element, pop-up show information. here's example of want do:

<label help-info="this displayed in dialog">help example</label>

i'm having trouble correctly passing string parameter template though.

here's i've tried:

index.html 

<html ng-app="myapp">   <head>     <script data-require="angular.js@*" data-semver="2.0.0-alpha.20" src="https://code.angularjs.org/2.0.0-alpha.20/angular.js"></script>     <link rel="stylesheet" href="style.css" />     <script src="helpinfodirective.js"></script>   </head>    <body ng-controller="myctrl">     <div help-info="test"></div>   </body> </html>

helpinfotemplate.html

<div>   {{'this a' + _attrs.help-info}} </div>

helpinfodirective.js

(function(){   var app = angular.module('myapp', []);    app.directive('helpinfo', function(){     return{       restrict: 'a',       scope: true,       templateurl: function(_elements, _attrs){         'helpinfotemplate.html'       }     //  link: function(_scope, _elements, _attrs){      //   _scope.helpattr = _attrs.help-info;      // }     }     }); })();

first, tried passing parameter using link parameter , didn't work tried placing template function no luck.

what correct way pass attribute's value template?

also, once have value, how can modify returned template can use ng-show show pop-up (we'll place modal eventually). i'm open suggestions.

link plunk

what correct way pass attribute's value template?

binding values templates

values bound templates through compilation process. can compile code in link function of directive using $compileservice , providing scope template needs bind to: 

app.directive('helpinfo', function($compile){     return{       restrict: 'a',       scope: {title : '@'},       link: function(scope, el){         var newelement = $compile('<div>{{title}}</div>')(scope);          el.hover(function(){           el.after(newelement);          });           el.mouseout(function(){           el.nextall().first().remove();          });         }     }     });

defining scope directive

you'll need setup isolated scope directive specify name of attribute you'll define text shown in popup. i've used 'title' attribute in example.

you can use directive this: 

<div help-info title="i title">click me</div>

demo

here's plunker shows in action.

http://plnkr.co/edit/vwdhc3l9b3qj4pf6cgv1?p=preview

also, once have value, how can modify returned template can use ng-show show pop-up

in example provided used jquery hover() , mouseout() events respond users hovering on , away dom element. if want take further, here's a tutorial shows how put popups or alerts services.


Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more