javascript - Angular directives - How to use JQuery to add ngModel and ngBind to custom directive elements? -
[info]
trying achieve implement custom angular directives encapsulate js needed them work.
directives unaware of displaying , store input value coming user. these information come attributes of directive.
directives use parent scope , won't create own one.
[problem] since directive not know in $scope map ng-model , ng-bind, approach read directive's properties, identify ng-model , ng-bing attributes shall , set them corresponding elements. not working.
believe due lack of knowledge, asking here - if approach ok?; possible set ngmodel , ngbind in manner?; doing wrong?.
[my directive's code]
var directives = angular.module('test.directives', []); directives.directive("labeledinput", function() { return { restrict: 'e', scope: false, template: "<div>" + "<span class='label'></span>" + "<input class='input' type='text'></input>" + "</div>", link: function(scope, element) { var elementidentifier = angular.element(element[0]).attr("idntfr"); var elementclass = angular.element(element[0]).attr("element-class"); var scopevaluename = angular.element(element[0]).attr("value-name"); var defaultvalue = angular.element(element[0]).attr("default-value"); var elementlabel = angular.element(element[0]).attr("label"); scope[scopevaluename] = defaultvalue; scope[elementidentifier] = elementlabel; $(angular.element(element[0]).children()[0]).attr('id', elementidentifier); $(angular.element(element[0]).children()[0]).addclass(elementclass); $(angular.element(element[0]).children().children()[1]).attr('ng-model', scopevaluename); $(angular.element(element[0]).children().children()[0]).attr('ng-bind', elementidentifier); } }; });
[result] result see in html page ng-model , ng-bind binded @ right location, have scope[scopevaluename] , scope[elementidentifier] in scope batarang provides, don't see them on screen values.
have ever solved similar issue?
thanks time!
[edit] sorry seems question wasn't understood add details!
here example html usage of directive:
<labeled-input idntfr='id001' element-class='someclass' value-name='person_name' default-value='default' label='person name:' > </labeled-input> what have in browser after angular parse directive , it's jo is:
<div id="effect_dt" class="someclass"> <span class="label" ng-bind="id001"></span> <input class="input" type="text" ng-model="person_name"> </div> what have in controller scope - $scope.id001 = "person name:" , $scope.person_name = default. these values not shown on page @ all.
if understood correctly want make like:
<labeledinput>model-name and/or field name</labeledinput> and convert like:
<div> <span class='label' ng-bind="mode-name.field-name"></span> <input class='input' type='text'></input> </div> you have read bit more angular compilation in directives, anyways:
to access directive original content, attributes or inner content need use transclude
to access template content (eg. in case lets 'span' element) have call telement argument in compile method, cause hold html template
here fine examples: angularjs: transclude directive template
all operations adding ng-model attribute-directive etc. should add before directive compilation, have use compilation block (in place of 'link()' block):
.compile = function compile(telement, tattrs) { //here add code eg append ng-model attribute etc. return { pre: function prelink(scope, ielement, iattrs) {}, post: function postlink(scope, ielement, iattrs) {} } } and last part - controller scope, easiest way add controller in template, wont loose scope.
edit:
after reading updated question ill give shot :p
app.directive('labeledinput', function($compile) { var directive = {}; directive.transclude = true; directive.restrict = 'e'; directive.template = "<div>" + "<span class='label' ></span><br/>" + "<input class='input' type='text' ></input>" + "</div>"; directive.compile = function(celem, cattrs) { var scope=angular.element(celem).scope(); console.log(scope); var elementidentifier = angular.element(celem[0]).attr("idntfr"); var elementclass = angular.element(celem[0]).attr("element-class"); var scopevaluename = angular.element(celem[0]).attr("value-name"); var defaultvalue = angular.element(celem[0]).attr("default-value"); var elementlabel = angular.element(celem[0]).attr("label"); $(celem[0]).find("div").attr('id', elementidentifier).addclass(elementclass); $(celem[0]).find("div span").attr('ng-bind', scopevaluename); $(celem[0]).find("div input").attr('ng-model', elementidentifier); return { pre: function prelink(scope, ielement, iattrs) { scope[scopevaluename] = defaultvalue; scope[elementidentifier] = elementlabel; } }; }; return directive; });
Comments
Post a Comment