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

How to get an array from html using angular directive?

本文关键字：获取 数组 html 何使用 angular 指令      更新时间：2023-09-26

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

<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 Doc，但没有找到有用的解决方案

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

角度代码

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/

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

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

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

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>

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>

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

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>
相关文章：