使用裝飾器添加Angular指令

我在Angular UI中使用Angular 1.4.8。我想要做的是裝飾ui-sref指令，所以如果當前$state.name匹配ui-sref狀態，它將突出顯示一個菜單元素（通過將CSS類設置爲「有效」）。使用裝飾器添加Angular指令

我測試以查看元素是否從我的導航頭中派生，如果是，我想爲該元素添加ngClass屬性。就目前而言，我只是想讓它們都突出顯示;我可以添加測試以便稍後匹配狀態。 true將被替換爲實際測試。現在我只想active類設置

.config(['$provide', ($provide: angular.auto.IProvideService) => { 
    return $provide.decorator('uiSrefDirective', [ 
     '$delegate', ($delegate) => { 
      var originalUiSref = $delegate[0]; 
      var originalUiSrefLink = originalUiSref.link; 

      originalUiSref.compile =() => (scope, element, attrs, uiSref) => { 
       var topBar = $('nav.top-bar'); 
       if (topBar.length > 0 && $.contains(topBar[0], element[0])) { 
        element.parent().attr('ng-class', '{ active: true }');  
       } 

       originalUiSrefLink.call($delegate, scope, element, attrs, uiSref); 
      }; 

      return $delegate; 
     } 
    ]); 
}])

原來的DOM元素：

<a ui-sref="requests">Requests</a>

添加裝飾後，這是我在我的瀏覽器的DOM看到：

<a ui-sref="requests" ng-class="{ active: true }" href="/requests">Requests</a>

大！我可以在DOM中看到添加的屬性，但我的瀏覽器忽略了它。這幾乎就好像在後面添加Angular掃描指令的DOM。如果我將代碼更改爲：

element.parent().addClass('active');

...然後它工作正常。 我在做什麼錯？

來源

2016-01-08 Amy

什麼是錯的'UI-S REF-active'？ http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active – vittore

我只是不知道這件事。謝謝！ – Amy

我認爲這個問題的答案。如果您將其作爲答案提交，我會接受它。 – Amy

艾米，你不需要實現這個指令，因爲事實上角UI已經擁有了它，請ui-sref-active

來源

2016-01-11 13:42:12 vittore

使用裝飾器添加Angular指令

回答

相關問題