Angular js creating a generic directive

Question

I am trying to create a generic directive in angular, for example, take this html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Testing directives</title>
    <script src="../scripts/angular.js"></script>
    <script type="text/javascript">
        angular.module('ngDirTest', [
                //controllers
        ])
    </script>
    <script src="../scripts/populate.js"></script>
    <script src="../Directive/GenericDirective.js"></script>
</head>

<body ng-app="ngDirTest">

<div ng-controller="PopulateCtrl">
    <div generic-directive ng-model="nameone"></div>
    <div generic-directive ng-model="nametwo"></div>
    <div generic-directive ng-model="namethree"></div>
    <div generic-directive ng-model="namefour"></div>
    <div generic-directive ng-model="namefive"></div>
    <div generic-directive ng-model="namesix"></div>
</div>

</body>
</html>

and take this controller:

angular.module("ngDirTest").controller('PopulateCtrl', ['$scope', function($scope) {

    //

}]);

and take this directive:

angular.module('ngDirTest').directive('genericDirective', [ function() {
    return {
        restrict: 'A',
        scope: {
            fn: "&"
        },
        template: '<input type="text" ng-model=name placeholder="type a name" />',

        link: function(scope) {
            scope.$watch('name', function(val) {
                //
            })
        }
    }
}]);

the idea is to have a template that can has different placeholders for the different text input tags. Is there a good way to do this?

I was thinking about getting the model from the input text being watched and then do something with it, but that won't help me set the placeholders and initialise the the input text fields.

What do you mean by "different placeholders for the different text input tags"? — Cem Özer, Aug 05 '14 at 13:23
@CemOzer so "placeholder=type a name" to be dynamic dependding on the field, so it could be a name for a person, another could be a name of a vehicle and another could be a name for an animal... etc... — user2405469, Aug 05 '14 at 13:26
@CemOzer could I not just add a name to the div tag and then do $scope.name in the temnplate or something similar to that? — user2405469, Aug 05 '14 at 13:31
Look at this post, http://stackoverflow.com/questions/14777841/angularjs-inputplaceholder-directive-breaking-with-ng-model. Accepted answer should give you a good starting point. — Cem Özer, Aug 05 '14 at 13:34

score 0 · Answer 1 · edited May 23 '17 at 11:57

Add the 'placeholder' to the directive model (see Change value of input placeholder via model?), or use a template function to set from the directive attribute.

I wasn't able to get it to bind from the isolate scope (I'm still learning this stuff), but here's an example using a template function: http://embed.plnkr.co/R8uq77sA1bGPNLUnVLW5/preview

Specifically, set template: templateFactory, then just put the placeholder in the directive markup:

var templateFactory = function($el, attrs) {
  return '<input type="text" ng-model="model" placeholder="' + (attrs.placeholder || 'default placeholder') + '" />'
}

Angular js creating a generic directive

1 Answers1