サービスをスコープとして使用するAngularJS指示文

Question

私はAngularで私の最初の指示文を作成しようとすると、もっと難しくなっているかもしれない単純な表示の問題があります。私は現在のユーザーのユーザーロールの配列を返すこのサービスを持っています。多くのユーザーは、ユーザー役割のみを持つことになります。そのことを念頭において、プロフィールページには何も表示したくありません。しかし、私のような人には、UserとAdminの役割があります。プロファイルページでは、現在のロールを変更するためのドロップダウンを表示したいと思います。私はuser.roles.length場合は基本的に

チェックをしたディレクティブを作成しようと思いました

！= 1は、DOMから要素を削除ダウン、他のドロップを示しました。

私が前にディレクティブを作成したことがないと、彼らは正しい方法のように見えますが、私は望む結果を得られません。

私はこれがあります。これは正しく、そのユーザーはそれを見る必要がある場合に応じて、HTMLをレンダリングします

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

を、それはどんな役割が表示されない管理者のために私は私のデータ変数は決してされていないと仮定していますので、中古。

Answer 1

私は間違った質問を投稿するのは嫌ですが、$ compileのマニュアルを読んで、スコープ変数をtrueに設定すると、それがわかりました。私は単に親のスコープを使用することができ、それはすべてを非常に簡単にしました。

完了し、正しいコード：

ライブリンク：trueにhttps://app.baileysproject.com

設定範囲は、親スコープを使用しています。 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 */ 
     } 
    } 
} 
});