Question

194

angularjs directive binding name attribute to template element

rated 0 times [ 197] [ 3] / answers: 1 / hits: 17504 / 11 Years ago, sat, october 19, 2013, 12:00:00

I am trying create a wrapper directive over select and I am trying to assign the 'name 'attribute to the select

directive

    <form name=myform>

          <selectformfield label=Select Orders id=id_1 name=orderselection

            selectedval=obj.order options=Orders />

    </form>

I have my directive defined as

mainApp

    .directive(

            'selectformfield',

            function() {

                return {

                    restrict : 'E',

                    transclude : true,

                    scope : {

                        label : '@',

                        id : '@',

                        selectedval : '=',

                        options : '=',

                        name: '='

                    },

                      template : <select class='form-control'     ng-model='selectedval' name='{{name}}' ng-options='item as item.name for item in options' required><option value=''>-- select --</option></select>



                };

            });

I am trying to access the select's name attribute through myform in the controller something like console.log($scope.myForm.orderselection) and I get undefined

If I hardcode the name in the directive then I am able to access the attribute console.log($scope.myForm.orderselection)

I am missing anything here. Do I have to do any post compile or something ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rocky

Add To Favorites

Follow

Total Points: 316

Total Questions: 108

Total Answers: 110

Location: Mali

Member since Sat, Feb 12, 2022

2 Years ago

answered 11 Years ago elishaannac · Accepted Answer

Khanh TO is correct in that you need to setup your name correctly when trying to access to through your isolated scope. Here is a working example of what I believe you are trying to accomplish. I've added comments to the code where I've changed what you had.

plunker

Javascript:

var app = angular.module('plunker', [])



.controller('MainCtrl', function ($scope, $log) {

    $scope.model = {

        person: {

            name: 'World'

        },

        people: [{

            name: 'Bob'

        }, {

            name: 'Harry'

        }, {

            name: 'World'

        }]

    };

})



.directive('selectformfield', function ($compile) {

    return {

        restrict: 'E',

        replace: true, // Probably want replace instead of transclude

        scope: {

            label: '@',

            id: '@',

            selectedval: '=',

            options: '=',

            name: '@' // Change name to read the literal value of the attr

        },

        // change name='{{ name }}' to be ng-attr-name='{{ name }}' to support interpolation

        template: <select class='form-control' ng-model='selectedval' ng-attr-name='{{name}}' ng-options='item as item.name for item in options' required><option value=''>-- select --</option></select>

    };

});

HTML:

<body ng-controller=MainCtrl>

    <p>Hello {{ model.person.name}}!</p>

     <form name='myForm'>

          <label for='orderselection'>Say hello to: </label>

          <selectformfield label=Select Orders id=id_1 name=orderselection

            selectedval=model.person options=model.people></selectformfield>

       <p ng-class='{valid: myForm.$valid, invalid: myForm.$invalid }'>The form is valid: {{ myForm.$valid }}</p>

       <p ng-class='{valid: myForm.orderselection.$valid, invalid: myForm.orderselection.$invalid }'>The people select field is valid: {{ myForm.orderselection.$valid }}</p>

    </form>

  </body>

CSS:

.valid {

  color: green;

}



.invalid {

  color: red;

}