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 -->

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

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

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>

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

为范围属性指定'='意味着如果电子邮件变量在指令范围之外更新（例如在您的控制器中），则更改也将反映在指令中。

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

使用AngularJs从data-attribute检索数据

1 个答案: