使用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);
        }
    }
});