使用 AngularJs 从数据属性中检索数据答案

【问题标题】：Retrieving the data from data-attribute with AngularJs使用 AngularJs 从数据属性中检索数据
【发布时间】：2015-07-16 17:27:04
【问题描述】：

我正在开发一个团队计划管理器，用户可以在单击主体并将其拖到画布上时创建一个图块（=任务）。我正在尝试将创建的任务链接到正确的用户。在屏幕的左侧，我有一个用户列表。现在任务只是随机放置在网格上。网格逻辑由行和列组成。所以我想我首先确定每个用户的y位置，然后将任务上的位置链接到用户。

我正在使用 Angular 和 Node 来创建这个团队规划器

通过自定义指令我获得了用户位置（我的 app.js 文件的部分代码）：

$rootScope = {};
$rootScope.users = [];

contentEditor.directive('custom', function($document) {
    return {
        restrict: 'E',
        scope: true,
        link: function(scope, element, attrs) {  
            var mail = $(element[0]).attr('data-email');
            console.log("mail ", $(element).attr('data-email'));
            $rootScope.users.push({"top ":element[0].offsetTop, });
            console.log(scope)
            console.log("Y positon of a user circle " + element[0].offsetTop);
        }
    }
});

部分html代码：

   <!-- START SIDEBAR -->
    <div id="sidebar" class="md-whiteframe-z4">
      <img id="logo" src="images/logo.png" alt="" >
      <div class="userList">
         <ul>
            <li ng-repeat="user in userInfo" id="userPos" class="circular" data-email="{{user.email}}"><p class="initials"><custom></custom>{{user.initials}}</p></li>
          </ul>
      </div>
    </div>
    <!-- END SIDEBAR -->

要更好地了解我的应用，请查看此链接 -> http://gyazo.com/2e011b0e38bc1e36c198bbaa322ad06c

我的问题是如何从我的数据属性访问数据电子邮件（请参阅列表项）。现在，当我尝试访问它时，它会返回 undefined。

【问题讨论】：

你试过$(element[0]).data('email')吗？
您是否有理由不能将其声明为范围的一部分？ scope: { dataEmail: '=' }, 然后你可以通过$scope.dataEmail 在你的指令中访问它（虽然我只是称之为电子邮件）
@alisabzevari，我尝试了您的建议并记录了它，但返回未定义
@Amicable，我将范围从 scope: true 调整为 scope: { email: '=' } 但没有变化...

标签： javascript angularjs node.js

【解决方案1】：

首先，您似乎正在尝试访问指令范围之外的属性。

虽然这可以通过 JQuery 实现，但这是一个坏主意，因为指令应该只处理其中的数据。这意味着它们可以在您的应用程序中的任何地方重复使用，而无需依赖以某种方式设置的外部数据。

所以不是你当前的标记。

<li ng-repeat="user in userInfo" id="userPos" class="circular" data-email="{{user.email}}">
     <p class="initials">
         <custom></custom>{{user.initials}}
     </p>
</li>

使用这个，它将属性放在你的指令可以访问它的地方。

<li ng-repeat="user in userInfo" id="userPos" class="circular">
    <p class="initials">
        <custom email="user.email"></custom>
        {{user.initials}}
    </p>
</li>

如果您只在指令的链接阶段使用属性，我认为最好使用指令的范围变量。所以像这样修改你的指令。

为 scope 属性指定 '=' 意味着如果 email 变量在指令范围之外更新（例如在您的控制器中），那么这些更改也会反映在指令中。

contentEditor.directive('custom', function($document) {
    return {
        restrict: 'E',
        scope: { email: '=' },
        link: function(scope, element, attrs) {  
            console.log("User email is: " + scope.email);
        }
    }
});

【讨论】：