CODEWITHSUNDEEP
angularjsangularjs-directive
avi zukrel
avi zukrel

Reputation: 5

creating a directive with parameter @

Here is my code:

restaurantApp.directive("formfield", function(){
return {
    restrict: "E",
    $scope: {
        formType: "@"
    },
    template: '<input type="{{formType}}">',
    link: function(scope, element, attrs){
        alert(scope.formType);
    }
}
});

and in my HTML file:

 <formfield formType="{{inputType}}">
 </formfield>

and in my controller:

    $scope.inputType="password";

the problem is that i'm getting undefined value in my alert box instead of getting password to be printed.

Upvotes: 0

Views: 27

Answers (1)

ms87
ms87

Reputation: 17492

Use form-type in your HTML not formType. You separate the words with a dash in the case of scope variables defined in camel case inside your directive JS code when you pass value to them in HTML.

<formfield form-type="{{inputType}}">
 </formfield>

Also, an isolate scope is declared as scope not $scope, so the following

$scope: {
    formType: "@"
}

should change to:

scope: {
    formType: "@"
}

Working plunk.

Upvotes: 2

Related Questions