如何使用 angular 指令从 html 获取数组？

Question

有一个给定的指令作为属性 ng-menu 具有以下数组值：

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

我需要像这样列出此数组中的每个项目：

首页
设置
关于

我试过这样的方法：

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

谁能帮我解决这个问题？我已阅读 Angular 文档，但没有找到有用的解决方案

Answer 1

您需要做的就是评估属性值：

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

Answer 2

我想你想要的可以这样实现：

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>

Answer 3

我写了一个简单的指令示例，可以满足您的需要：

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>

Answer 4

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>

Answer 5

一个非常简单的可重用指令，用于将所需的输出显示为列表。

Angular代码

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>

希望对您有所帮助。

这是fiddle：http://jsfiddle.net/5sbb48fq/

如何使用 angular 指令从 html 获取数组？

How to get an array from html using angular directive?

javascript

directive

angularjs

angularjs-directive

angularjs-scope