如何在指令中查看html標簽的屬性？

Question

我需要在指令中查看我的一個內部html元素（li標簽）的屬性。 我已經嘗試過，但無法做到。 我的html如下：

<div id="notificationsTile">
    <div class="blue">
       <div class="step">
            <ul ng-repeat="item in Model.DisplayNotifications">
                <li itemPriority = {{item.Priority}}>
                    <h3>{{ item.EndDate | date: 'dd MMMM' }}</h3>
                    <p>{{ item.NotificationName }}</p>
                </li>
            </ul>
        </div>
    </div>
</div>

我需要觀看itemPriority。 手表如下：

scope.$watch("itemPriority", function(newVal, oldVal){
                debugger;
            });

我的指示如下：

notificationsTileModule.directive('spNotificationsTile', function (spNotificationsService, spSessionStorageService) {
    return {
        restrict: 'E',
        replace: true,
    scope: {
            priority: '=itemPriority'   
        },
        templateUrl: '/_catalogs/masterpage/SPDP.Portal/Views/NotificationTile/NotificationTile.html',
        link: function (scope, element, attrs) {

            var model = scope.Model = {
                DisplayNotifications: []        

            };

            //model.Priority = scope.itemPriority;

            scope.$watch('priority', function(newVal, oldVal){
                debugger;
            });
}
});

我哪里錯了？

Answer 1

您不需要使用插值來設置item-priority屬性的值：

<ul ng-repeat="item in Model.DisplayNotifications">
    <li item-priority="item.priority">{{item.priority}}
    </li>
</ul>

請注意，我使用小寫， 划線分隔格式編寫了指令的名稱。 Angular會在指令鏈接函數中將其轉換為itemPriority 。 從那里，您可以像這樣觀看屬性值：

app.directive('itemPriority', function() {
  return {
    restrict: 'A', 
    scope: {
      priority: '=itemPriority'
    },
    link: function(scope, element, attr) {
      scope.$watch('priority', function() {
        console.log(scope.priority);
      });
    }
  }
});

這是一個有效的演示： http ： //plnkr.co/edit/ty1bJoxqd8ZBIV7CqUEI?p=preview

更新
您沒有在html中的任何位置添加指令（沒有sp-notifications-tile元素）。 但即使你確實包含了元素，你也會遇到麻煩，因為它正在替換它的內容，你會丟失由ng-repeat生成的列表項。

如果您只需ng-class優先級列出項目列表，請使用ng-class ，如下所示：

<ul ng-repeat="item in Model.DisplayNotifications">
  <li>
    <div ng-class="{'alert-danger': item.priority < 2, 
        'alert-warning': item.priority >= 2 && item.priority < 4, 
        'alert-info': item.priority >= 4}">
      {{item.priority}}
    </div>
  </li>
</ul>

以下是使用ng-class的更新演示： http ： //plnkr.co/oR6eBPOsdHqqGiF0U7Zs

Answer 2

您的指令可以訪問ng-repeat用於生成列表的相同項目數組。

<div sp-notifications-tile items="Model.DisplayNotifications" class="alert">
  <ul>
    <li ng-repeat="item in Model.DisplayNotifications">
...

然后，您可以觀察這些項目，並通過鏈接功能的element參數相應地修改類。 您表示您將僅根據項目的優先級之一來創建課程。 在這個例子中，我只是采取第一項。

app.directive('spNotificationsTile', function() {
  return {
    restrict: 'A',
    scope: {
      items: '='
    },
    link: function(scope, element, attr) {
      scope.$watch('items', function() {
        var firstItem = element.find('li')[0];
        var firstPriority = angular.element(firstItem).scope().item.priority;

        if (firstPriority > 3)
          element.addClass('alert-warning');
        else
          element.removeClass('alert-warning');
      }, true);
    }
  }
})

這是一個演示： http ： //plnkr.co/zrPEFSNXGDENB6MEQo8i 。 您可以嘗試更改第一個優先級值，以查看應用於通知磁貼的類的更改。

Answer 3

嘗試這個

$scope.itemPriority = item.Priority ;


scope.$watch('itemPriority ', function( status )
  {
   console.log(status);
 });