How to get an array from html using angular directive?

Question

There is a given directive as an attribute ng-menu with the following array value:

<div data-ng-menu="['Home','Settings','About']"></div>

I need to list each item in this array like this:

Home
Settings
About

I have tried something like this:

app.directive('ngMenu', function () {
    var menu = {};
    var getItems = function(scope, element, attributes) {
    //I suppose I should get the array value here
}
    menu.restrict = 'AEC';
    menu.link = getItems;
    template : '<ul>'
             + '<li>items</li>'
             + '</ul>';
    return menu;
});

Can anyone help me with this? I have read the Angular Doc but I didn't find a useful solution

"There is a given directive: ... data-ng-menu ...": Where is that directive? Did you write it? Post it's full source, if you want some useful help... If you nedd help writing it, specify more clearly how it should perform, exactly... — MarcoS
– MarcoS, Commented Apr 29, 2016 at 9:28

Manoj Paul · Accepted Answer · 2016-04-29 11:13:30Z

2

A very simple reusable directive to display the desired output as a list.

Angular code

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope){
  $scope.items=['Home','Settings','About'];
});

myApp.directive('myMenu', function() {
  return {
    restrict: 'E',
    scope: {
      list: "="
    },
    template: '<ul><li ng-repeat="item in list">{{item}}</li></ul>'
  };
});

HTML

<div ng-controller="MyCtrl">
  <my-menu list="items"></my-menu>
</div>

Hopefully it helps.

Here is the fiddle: http://jsfiddle.net/5sbb48fq/

edited Apr 29, 2016 at 11:13

answered Apr 29, 2016 at 11:07

Manoj Paul

5,5671 gold badge15 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2016-04-29 09:49:19Z

1

All you need to do is to evaluate attribute value:

var getItems = function(scope, element, attributes) {
  scope.menu = scope.$eval(attributes.ngMenu);
}

In above I'm assuming that you don't want to have an isolated scope. If however you do need it (which I would recommend you for this kind of directives), then you can use two-way binding:

app.directive('ngMenu', function() {
  var menu = {};
  var getItems = function(scope, element, attributes) {
    console.log(scope.menu); // array of items bound to the scope.menu
  }
  menu.scope = {
    menu: '=ngMenu'
  };
  menu.restrict = 'AEC';
  menu.link = getItems;
  menu.template = '<ul><li ng-repeat="item in menu">{{item}}</li></ul>';
  return menu;
});

edited Apr 29, 2016 at 9:49

answered Apr 29, 2016 at 9:42

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

Vlad · Accepted Answer · 2016-04-29 10:00:53Z

1

I've wrote a simple directive example that will fit your needs:

https://jsfiddle.net/obx25af0/9/

js:

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

app.directive('myMenu', function(){
    var link = function(scope, attrs, element){
    console.log(scope.menuItems);
    alert(scope.menuItems);
  }
    return {
    restrict: 'AE', //use as element or attribute
    scope: { //isolate scope
        'menuItems': '='
    },
    link: link
  }
});

html:

<div>
  <!-- You can use the directive as an attribute(restrict A)-->
  <div my-menu menu-items="['menu 1', 'menu 2', 'menu 3']"></div>
  <!-- Or as an element(restrict E)-->
  <my-menu menu-items="['menu 4', 'menu 5', 'menu 6']"></my-menu>
</div>

answered Apr 29, 2016 at 10:00

Vlad

3052 silver badges6 bronze badges

Comments

Ashokreddy · Accepted Answer · 2016-04-29 10:03:18Z

0

I think this example is useful

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script src="Scripts/angular.js"></script>
    <script>
        var app = angular.module('MyApp', []);
        app.directive('menu', function () {
            debugger
            return {
                restrict: 'AEC',
                scope:{},
                link: function (scope, ele, attributes) {
                    scope.result = attributes.menu;
                },
               template: '<div>{{result}}</div>'
            }
        })
    </script>




</head>
<body>
 <div ng-app="MyApp">
     <div menu="'Home','Settings','About'"></div>
 </div>

</body>

</html>

answered Apr 29, 2016 at 10:03

Ashokreddy

3521 silver badge11 bronze badges

Comments

Amir Suhail · Accepted Answer · 2016-04-29 09:50:02Z

0

I think what you are looking for can be achieved like this:

app.directive('ngMenu', function () {
    var menu = {};
    var getItems = function($scope, element, attributes) {
       alert($scope.ngMenu); //$scope.ngMenu will have your array
    };
    menu.scope = {
       ngMenu: '@'
    };
    menu.restrict = 'AEC';
    menu.link = getItems;
    template : '<ul>'
             + '<li>items</li>'
             + '</ul>';
    return menu;
});

HTML:

<div ng-menu="['Home','Settings','About']"></div>

answered Apr 29, 2016 at 9:50

Amir Suhail

1,3043 gold badges13 silver badges32 bronze badges

1 Comment

dfsq Over a year ago

"$scope.ngMenu will have your array" - no, it will a string.

Collectives™ on Stack Overflow

How to get an array from html using angular directive?

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related