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

Question

我正在一个团队计划经理中工作，用户可以在单击主体并将其拖动到画布周围时创建一个tile（= task）。 我正在尝试将创建的任务链接到正确的用户。 在屏幕的左侧，我有一个用户列表。 现在，任务只是随机放置在网格上。 网格逻辑由行和列组成。 所以我想我首先确定每个用户的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

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

Answer 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属性指定'='意味着如果在指令范围之外（例如，在您的控制器中）更新了电子邮件变量，则更改也将反映在指令中。

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