Angularjs 如何在指令中查看html标记的属性？

我需要观察指令中某个内部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>

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

我的指示如下：

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

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

我哪里做错了

试试这个

$scope.itemPriority = item.Priority ;


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

---

不需要使用插值来设置项目优先级属性的值：

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

下面是一个工作演示：

更新
您没有在html中的任何位置添加指令（没有

sp notifications tile

元素）。但是，即使包含了元素，也会遇到问题，因为它正在替换其内容，并且会丢失由

ng repeat

生成的列表项

如果您只需要添加一个类来按优先级列出项目，请按如下方式使用

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>

{{item.priority}

---

以下是使用

ng class

更新的演示：

您的指令可以访问

ng repeat

用于创建列表的相同项目数组

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

---

这里有一个演示：。您可以尝试更改第一个优先级值，以查看应用于通知磁贴的类的更改。

我应该在哪里设置此$scope.itemPriority=item.priority？我正在ng repeat中将其设置为属性。请在控制器中尝试。我没有为此使用控制器。这是在指令中完成的。我不能在这里得到一个项目的单一值，rt？使用ng repeat，我们将获取每个项目，我需要将其设置为属性并观察。。怎么可能呢？我的属性没有定义！它必须匹配链接函数签名，通常是：

（范围、元素、属性）

，但用法差别很大。我也使用相同的方法。当我们加载页面并且其值未定义时，手表只点击一次。在第一次击中之后，手表不会被执行！为什么不仅仅是watchExpression的“优先级”？哈！这也行，谢谢@ExpertSystem。我起床太晚了。是否可以使用ng类为外部分区设置类？为此，我们需要获得该指令之外的优先级。有可能把它送到外舱吗？还是我们需要看？是否可以从父对象在指令中查看模型对象？