javascript - 使用模板后使用 Angular 获取元素属性值

Question

我对 Angular 比较陌生，这是我第一次尝试使用自定义指令。我有一个正在使用的表，每个单元格都有一个数据属性。例如，“data-dept="service”，我想在用指令覆盖它之前访问这个值。在我的指令中，我设置了 template = true，这会删除我的数据属性。

我喜欢我的网站，我正在努力更好地解释我正在尝试做的事情。 http://partnerportal-preprod.automate-webservices.com/list/#/hoursTable

第一行表格内的单元格是可点击的，但我想知道用户是否正在点击服务。

更新

我创建了 plunker 以更好地说明我的问题。 我有一个基本表，我正在使用指令替换表中的一行。 这样做时，我失去了我需要将其设置为对象中的键供以后使用的属性。

http://plnkr.co/edit/oXRM6lRkidnAHfBA4GsR?p=preview

HTML

 <tr>
    <td name="valueIneed" hello-world>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>

指令

app.directive('helloWorld', function($parse) {
      return {
            template: '<td><input type="text"></td>',

                    replace: true,
                    transclude: 'true',
                    scope: {
                      position: '='
                    },
             link: function (scope,element,attrs,ngModel) { 


                console.log(attrs.attribute);
                 scope.clickMe = function () {

                  console.log('clicked');
                    scope.isChecked = true;
         };

             }
         };
     });

Answer 1

首先删除replace: true。

其次查看name属性的值:

console.log(attrs.name);

通过使用 replace: true，该指令正在替换具有 name 属性的元素。

---

replace:true 已弃用 ¹

来自文档:

replace ([DEPRECATED!], will be removed in next major release - i.e. v2.0)

specify what the template should replace. Defaults to false.

• true - the template will replace the directive's element.
• false - the template will replace the contents of the directive's element.

-- AngularJS Comprehensive Directive API

来自 GitHub:

Caitp-- It's deprecated because there are known, very silly problems with replace: true, a number of which can't really be fixed in a reasonable fashion. If you're careful and avoid these problems, then more power to you, but for the benefit of new users, it's easier to just tell them "this will give you a headache, don't do it".

-- AngularJS Issue #7636