Как получить массив из html с помощью угловой директивы?

Существует данная директива как нг-меню атрибута со следующим значением массива:Как получить массив из html с помощью угловой директивы?

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

Мне нужно перечислить каждый элемент в этом массиве, как это:

Home
Настройки
О

Я пробовал что-то вроде этого:

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; 
});

Может ли кто-нибудь помочь мне с этим? Я прочитал Угловой док, но я не нашел полезное решение

источник

2016-04-29 Joey Zhang

«Существует данная директива: ...-нг-меню данных ...»: Где эта директива? Вы писали это? Опубликовать полный источник, если вам нужна какая-то полезная помощь ... Если вы не знаете, как это написано, уточните, как это сделать, точно ... – MarcoS

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>

источник

2016-04-29 10:03:18 Ashokreddy

Это очень полезно для меня, спасибо –

Все, что вам нужно сделать, это оценить значение атрибута:

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

В выше, я предполагаю, что вы не хотите имеют изолированный объем. Однако, если вам это нужно (я бы рекомендовал вам для этого вида директив), то вы можете использовать двухстороннее связывание:

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; 
});

источник

2016-04-29 09:42:47 dfsq

Я думаю, что вы ищете может быть достигнута следующим образом:

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>

источник

2016-04-29 09:50:02

* «$ scope.ngMenu будет иметь ваш массив» * - нет, это будет строка. – dfsq

Я написал простую директиву пример, который будет соответствовать вашим потребностям:

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>

источник

2016-04-29 10:00:53 Vlad

Очень простые многоразовые директивы для отображения желаемого результата в виде списка.

Углового код

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>

Надеется, что это помогает.

Вот скрипка: http://jsfiddle.net/5sbb48fq/

источник

2016-04-29 11:07:06

Как получить массив из html с помощью угловой директивы?

ответ

Смежные вопросы