AngularJS Directives: Inserting Attribute values in template

Question

I am fairly new to AngularJS, and I have the following problem.

I have an HTML Element:

    <div class="hn-multi-select" array-of-strings="testArray">
    </div>

and a Directive:

angular.module('directivesinuse')
  .directive('arrayOfStrings', function($rootScope) {
    return {
      scope: {
            pahn: '=arrayOfStrings'
        },

      template: '<div><input type="text">'+
          '<select name="" id="" multiple ng-model="pahn" ng-options="dm.name for dm in pahn"></select></div>'
      replace: true,
      compile: function compile(tElement, tAttrs, transclude) {
          return {
            pre: function preLink(scope, iElem, iAttrs) {
            },
            post: function postLink(scope, iElem, iAttrs) {
          }
        };
      }

    };

});

What I want to achieve is, that you enter an array (with objects who have the attribute name) into the HTML Component array-of-strings="dModelTest" . This array gets passed on to the directive, who creates a Select List with all the components out of that array.

Everything works fine, but I cant get it to fetch the array from the array-of-strings and create the proper template out of that information.

In the webpage it still shows up as:

<select name="" id="" multiple="" ng-model="pahn" ng-options="dm.name for dm in pahn" class="ng-pristine ng-valid"></select>

But it should show up as

<select name="" id="" multiple="" ng-model="dModelTest" ng-options="dm.name for dm in dModelTest" class="ng-pristine ng-valid"></select>

Do you guys have any suggestions for that problem?

Polochon · Accepted Answer · 2014-08-01 10:58:41Z

In your code you have forgotten to declare the display value of each item with the

ng-options="dm as dm.name for dm in pahn"

Moreover, in your case you dont need to override the compile function, define the template is enough.

here is a working example. Hope it will help you.

http://jsfiddle.net/n7TKE/4/

    .controller('ParentController', function($scope) {
        $scope.array = [{name: 'hi'}, {name: 'ho'}, {name: 'hu'}];
    })
    .directive('toSelectList', function () {
        return {
            scope: {
                pahn: '=toSelectList'
            },
            restrict: 'A',
            replace: true,         
            template: '<div><input type="text" ng-model="selectedValue.name">'+
'<select ng-model="selectedValue" ng-options="dm as dm.name for dm in pahn"></select></div>'

        }

the directive gets the array of items and create a select list with them.

The item name is bind to the input text

Collectives™ on Stack Overflow

AngularJS Directives: Inserting Attribute values in template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related