Angular directives - How to use JQuery to add ngModel and ngBind to custom directive elements?

Question

[Info]
what I am trying to achieve is to implement some custom angular directives that will encapsulate all the JS needed for them to work.
The directives are unaware of what they will be displaying and where to store any input value coming from the user. These information will come from the attributes of the directive.
My directives will use the parent scope and won't create their own one.

[Problem] Since the directive does not know where in the $scope to map the ng-model and ng-bind, my approach is to read the directive's properties, identify what ng-model and ng-bing attributes shall be and set them to the corresponding elements. However this is not working.
I believe that its due to my lack of knowledge, so I am asking here - If my approach is OK?; Is it possible to set ngModel and ngBind in that manner?; What am I 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] As a result I see in the HTML page where the ng-model and ng-bind are binded at the right location, I have scope[scopeValueName] and scope[elementIdentifier] in the scope that Batarang provides, but I don't see them on my screen as values.

Have anyone ever solved a similar issue?

Thanks for your time!

[Edit] Sorry it seems my question wasn't understood I will add some details!

Here is the example HTML usage of my directive:

<labeled-input
    idntfr='id001'
    element-class='someClass'
    value-name='person_name'
    default-value='default'
    label='Person Name:'
>
</labeled-input> 

What I have in my browser after angular parse my directive and do 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 I have in my controller scope is - $scope.id001 = "Person Name:" and $scope.person_name = default. However these values are not shown on the page at all.

Answer 1

If I understood you correctly you want to make something like:

<labeledInput>model-name and/or field name</labeledInput>

and convert it to something like:

<div>
    <span class='label' ng-bind="mode-name.field-name"></span>
    <input class='input' type='text'></input>
</div>

You have to read a bit more about angular compilation in directives, anyways:

• to get any access to directive original content, like attributes or inner content you need to use transclude

• to access template content (eg. in your case lets say 'span' element) you have to call tElement argument in compile method, cause it will hold your html from template

here are some fine examples: Angularjs: transclude directive template

all this operations like adding ng-model attribute-directive etc. you should add before directive compilation, to do so you have to use compilation block (in place of your 'link()' block):

.compile = function compile(tElement, tAttrs) {
    //here add some 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 is just to add controller in template, so you wont loose any scope.

EDIT:

after reading your updated question ill give it a 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;
});

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

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

Answer 2

I am not sure if am getting this right, But I guess you want to build some sort of generic directive with behaviour derived from the parent scope and bound to it's template, in this case, the input field.

You could create a isolate scope on the labeledInput directive, Like so:

scope: {
   doSomething:'&' 
}

And it's template would become :-

template: "<div>" +
            "<span class='label'></span>" +
            "<input class='input' type='text' ng-change="doSomething()"></input>" +
          "</div>",

And your html will be:-

    <labeledInput doSomething="someFunctionOnController()"></labeledInput>

So, someFunctionOnController defined in a controller's scope will be called on change of the input field.

Answer 3

There is a much easier way to do this: (See the jsfiddle at http://jsfiddle.net/j55B8/17/)

Code for the directive:

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

directives.directive("labeledInput", function() 
    return {
        restrict : "E",
        replace : true,
        scope : {
            "idntfr" : "@",
            "elementClass" : "@",
            "valueName" : "=",
            "defaultValue": "@",
            "label" : "@"
        },
        template : "<div id='{{idntfr}}' class='{{elementClass}}' ng-init='valueName=defaultValue'>" +  
                       "<span class='label' ng-bind='label'></span>" +
                       "<input class='input' type='text' ng-model='valueName'></input>" +
                   "</div>"
    }
});

HTML

<labeled-input 
    idntfr='id001' 
    element-class='someClass' 
    value-name='person_name' 
    default-value='default name' 
    label='Person Name: '>
</labeled-input>

The value typed in the above text box is {{person_name}}