Hi All,
Still getting to grips around the awesomeness that is Angular and stumbling
over a template and binding which i dont fully grasp.
Objective:
So i`m trying to write a nice little directive to take care of creating my
bootstrap input fields, tied to my model and have wondrous validation all
neatly packaged.
Issue:
everything works as expected on the dom creation, but i cant seem to get
the input name registering correctly on the form. If i type it out static
it works ie (name="industry") but dynamic it doesnt get picked up
(name="{{title | lowercase}}".
I presume this is due to some lifecycle issue somewhere, but just cant seem
to find out what and where.
Directive:
> .directive('bs3field', ['$compile', '$templateCache', function ($compile,
>> $templateCache) {
>
> $templateCache.put("field.text", ''
>
> + '<div class="form-group" ng-class="validate();
>> {\'has-error\': $parent.customerForm.{{title | lowercase}}.$invalid}">'
>
> + ' <label for="{{title}}" class="control-label
>> col-sm-3">{{title}}</label>'
>
> + ' <div class="col-sm-5">'
>
> + ' <input type="text" ng-model="ngModel"
> name="industry"class="form-control" required >'
>
> + '
>> <span>-{{$parent.customerForm.industry.$invalid}}</span>'
>
> + ' </div>'
>
> + '</div>');
>
> return {
>
> restrict: 'E',
>
> require: '^form',
>
> scope: {
>
> title: '@',
>
> type: '@',
>
> placeholder: '@',
>
> ngModel: '=',
>
> form: '='
>
> },
>
> controller: function($scope, $element, $attrs){
>
> $scope.validate = function(){
>
> console.log($scope.$parent.customerForm); //works and
>> returns the parent form
>>
> console.log
>> ($element.parent().controller('form')[$attrs.title.toLowerCase()]); //works
>> and returns the model if template uses name="static" variable name, ie.
>> industry
>>
> return "";
>>
> }
>
> },
>
> template: function(element, attrs){
>
> return $templateCache.get("field." + attrs.type);
>
> },
>
> replace: true,
>
> link: function(scope, element, attrs, formCtrl) {
>
> // element.html($templateCache.get("field." + attrs.type));
>
> // element.replaceWith($compile()(scope)); //produces same
>> output as template binding
>
> }
>
> };
>
> }]);
>
>
Usage:
<bs3field title="Industry" ng-model='customer.industry' type='text'
placeholder='Industry. ie: Financial Services' />
Green text: works as expected if used with name="industry", doesnt work if
name="{{title | lowercase}}
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
