使用服務作爲其範圍的AngularJS指令

我有一個簡單的視圖問題，我可能通過嘗試在Angular中創建我的第一個指令而變得更加困難。我有這個服務爲當前用戶返回一組用戶角色。許多用戶只會擁有用戶角色。考慮到這一點，我不想在他們的個人資料頁面上顯示任何內容。但是，像我這樣的人會擁有用戶和管理員角色。所以在配置文件頁面上，我想顯示一個下拉菜單來更改當前角色。使用服務作爲其範圍的AngularJS指令

我想我會創造一個指令，做了檢查基本

如果user.roles.length！= 1，則表明降下來還有從DOM刪除元素。

就像我之前說過的，我從未創建過一個指令，他們看起來像是正確的路要走，但我沒有得到我想要的結果。

我有這樣的：

app.directive('selector', function (SessionState, $compile) { 
    return { 
     priority: 100000, 
     scope: false, 
     compile: function (element, attr, linker) { 

      var data = SessionState.User.Data.roles; 

      var multiRoleView = '<p>Active Role:</p><select ng-model="State.User.activeRole" ng-options="role for role in data"></select>'; 

      if (data.length != 1) { 
       element.html(multiRoleView).show(); 
       $compile(element.contents()); 
      } else { 
       element.children.remove(); 
       element.remove(); 
      } 

      return function linkFn() { 
       /* Optional */ 
      } 
     } 
    } 
});

這將取決於正確的，如果用戶能看到它呈現HTML，但管理員不顯示任何角色，因爲我假設我的數據變量永不用過的。

來源

2017-02-24 Bailey Miller

我討厭發佈一個不好的問題，但有一些擺弄和閱讀$編譯的文檔我發現通過將範圍變量設置爲true。我可以簡單地使用父母的範圍，這使得一切都非常簡單。

完成的與正確的代碼：

直播鏈接：https://app.baileysproject.com

範圍設置爲true，使用範圍的父母。刪除了element.children.remove（），拋出錯誤。

app.directive('selector', function (SessionState, $compile) { 
return { 
    priority: 100000, 
    scope: true, 
    compile: function (element, attr, linker) { 



     var multiRoleView = '<p>Active Role:</p><select ng-model="State.User.activeRole" ng-options="role for role in State.User.Data.roles"></select>'; 

     if (data.length != 1) { 
      element.html(multiRoleView).show(); 
      $compile(element.contents()); 
     } else { 
      element.remove(); 
     } 

     return function linkFn() { 
      /* Optional */ 
     } 
    } 
} 
});

來源

2017-02-24 16:25:22

使用服務作爲其範圍的AngularJS指令

回答

相關問題