2015-09-28 182 views
0

我尝试使用角度与ui路由器。除一种情况外,它工作正常。 我已经创建了一个指向元素,它是页面的标题。这个元素有一个包含4个链接的菜单。这些链接取决于当前用户的ID。当我打电话给我的指令时,这个id被作为一个属性传递。带参数的角度ui路由器

ui.js

angular.module('app.ui', 
[ 

]).directive('userHeader', function() 
{ 
    return { 
     restrict : 'E', 
     templateUrl : '/scripts/directives/ui/userHeader.html', 
     controller : function($scope) 
     { 

     }, 
     link : function(scope, element, attributes) 
     { 
      scope.uid = attributes.uid 
     } 
    }; 
}); 

userHeader.html

<md-list layout="row" class="md-whiteframe-z1 no-padding"> 
    <md-list-item class="has-link" layout-align="center center"> 
     <md-item-content md-ink-ripple layout="row" layout-align="center center" ui-sref="userInformations({ id : '{{ uid }}' })"> 
      <div class="inset"> 
       <md-icon md-font-set="material-icons">person</md-icon> 
      </div> 
      <md-tooltip hide-gt-sm>Informations</md-tooltip> 
      <div class="inset" hide-sm>Informations</div> 
     </md-item-content> 
    </md-list-item> 
    <md-list-item class="has-link" layout-align="center center"> 
     <md-item-content md-ink-ripple layout="row" layout-align="center center" ui-sref="userEvents({ id : '{{ uid }}' })"> 
      <div class="inset"> 
       <md-icon md-font-set="material-icons">event</md-icon> 
      </div> 
      <md-tooltip hide-gt-sm>Événements</md-tooltip> 
      <div class="inset" hide-sm>Événements</div> 
     </md-item-content> 
    </md-list-item> 
    <md-list-item class="has-link" layout-align="center center"> 
     <md-item-content md-ink-ripple layout="row" layout-align="center center" ui-sref="userGalleries({ id : '{{ uid }}' })"> 
      <div class="inset"> 
       <md-icon md-font-set="material-icons">photo</md-icon> 
      </div> 
      <md-tooltip hide-gt-sm>Galeries</md-tooltip> 
      <div class="inset" hide-sm>Galeries</div> 
     </md-item-content> 
    </md-list-item> 
    <md-list-item class="has-link" layout-align="center center"> 
     <md-item-content md-ink-ripple layout="row" layout-align="center center" ui-sref="userFriends({ id : '{{ uid }}' })"> 
      <div class="inset"> 
       <md-icon md-font-set="material-icons">group</md-icon> 
      </div> 
      <md-tooltip hide-gt-sm>Amis</md-tooltip> 
      <div class="inset" hide-sm>Amis</div> 
     </md-item-content> 
    </md-list-item> 
</md-list> 

user.html

<user-header user-id="UserInformations.user.id"></user-header> 

我不知道该怎么牛逼将user-id属性绑定到我的md-item-content的uu-sref属性中,以便它可以生成正确的链接。

在此先感谢您的帮助

回答

0

如果没有数据传递到指令是你的问题

你的代码改成这样

<user-header user-id="{{UserInformations.user.id}}"></user-header> 

link : function(scope, element, attributes) 
{ 
    scope.uid = attributes.userId; 

} 

也要看https://docs.angularjs.org/guide/directive关于如何将数据传递到指令范围。

+0

我在发帖前试过了。它不起作用。当我打开Chrome控制台时,我看到该id为空 – T00rk

+0

即使id不为空,生成的href也不会包含它 – T00rk