Question

昨天我开始在线学习AngularJs。我决定使用Angular为我的新项目创建一些有用的东西。以下是我辛勤工作的一部分：

HTML部分

<div data-ng-controller="DataGrid_Controller">
    <table class="table table-stripped">
        <thead>
            <tr>
                <th data-field="fname"> First Name </th>
                <th data-field="lname"> Last Name </th>
                <th data-field="email"> Email </th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>

角色部分

<script type="text/javascript">
var app = angular.module('TestApp',[]);

app.controller('DataGrid_Controller', function($scope){
    //var fields = ['fname', 'lname', 'email']; 
    //How can I get the value of data-field attributes in my 'Controller' so that I could use them 
})
</script>

如何在我的控制器中从子元素中获取data-attributes的值（我不知道术语element是否存在角度？）。

我是{1}的1天大婴儿所以如果你认为我正在采取错误的做法，请告诉我正确的方法。我已使用AngularJs多年，所以我认为jQuery为controller。请帮我解决问题。

Answer 1

在Angular中，您需要考虑模型，而不是结果DOM。该模型是唯一的事实来源。因此，您需要将标题放在模型中的某个位置。然后循环遍历数据，并为每个项目迭代标题并创建表格。您需要一个指令来处理DOM，一个包含数据的控制器和一个简单的模板：

DOM：

<div data-ng-controller="DataGrid">
  <table class="table table-striped">
    <thead>
      <tr>
        <th data-header="firstName" data-headers="headers">
          First name
        </th>
        <th data-header="lastName" data-headers="headers">
          Last name
        </th>
      </tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="character in characters">
        <td data-ng-repeat="header in headers">
          {{character[header]}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

角度应用

'use strict';

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

Datagrid控制器：

'use strict';

DataAttributes.controller('DataGrid', ['$scope', function($scope){
    // let this data came from server
    $scope.characters = [
        {
            'firstName' : 'Anakin',
            'lastName' : 'Skywalker',
            'email' : 'annie@tatooi.ne',
            'age' : 9
        },
        {
            'firstName' : 'Kos',
            'lastName' : 'Palpatine',
            'email' : 'sidius@darksiders.com',
            'age' : 60
        },
        {
            'firstName' : 'Jar',
            'lastName' : 'Jar',
            'email' : 'stupid@nab.oo',
            'age' : 23
        }
    ];

    $scope.headers = [];
}]);

指令：

'use strict';

DataAttributes.directive('header', [function(){
    return {
        'restrict' : 'A',
        'scope' : {
            'headers' : '='
        },
        'link' : function(scope, iElement, iAttrs){
            scope.headers.push(iAttrs['header']);
        }
    };
}]);

我创建了plunkr, so you can play with it。

让我们看看幕后的内容。假设您已经在其他地方获得了数据（characters）。现在，您希望动态构建包含其中某些字段的表。您创建一个指令来捕获字段名称（header）。它需要将标题名称放在控制器的范围内。因此，您需要将模型从父作用域绑定到指令。这是通过'headers' : '='行实现的，tells Angular to

在本地范围属性和通过attr属性的值定义的name的父范围属性之间设置双向绑定。如果未指定attr名称，则假定属性名称与本地名称相同。

该指令只是将字段名称推送到父作用域。现在，ngRepeat可用于迭代它们并为characters中的每个元素渲染一行。就是这样！

如何从角度控制器中的子元素获取数据属性值

1 个答案: