2

ASP.Net のユーザー コントロールのような Angularjs のディレクティブについて考えてきましたが、おそらく間違っています。

ユーザー コントロールを使用すると、さまざまな機能をウィジェットにカプセル化して、任意のページにドロップできます。親ページはウィジェットに何も提供する必要はありません。それに近いことをするための指示を得るのに苦労しています。ユーザーがログインすると、どこかのグローバル変数でユーザーの姓/名に固執するアプリがあるとします。ここで、「loggedinuser」というディレクティブを作成し、それを任意のページにドロップしたいと考えています。そのグローバル変数から引き出されたログインユーザーの名前で単純な div をレンダリングします。コントローラーにその情報をディレクティブに渡さなくても、どうすればそれを行うことができますか? ビューでのディレクティブの使用法を <loggedinuser/> のようにシンプルにしたい

これは可能ですか？

4

1 に答える 1

2

ディレクティブとは「任意のページにドロップできるウィジェットに一連の機能をカプセル化するもの」と大まかに要約できると思いますが、それだけではありません。ディレクティブは、新しいタグを作成して HTML を拡張し、より表現力豊かなマークアップを記述できるようにする方法です。たとえば、評価コントロールを作成するために<div>一連のタグを記述する代わりに、新しいタグ<li>でラップすることができます。または、たくさんの や などをタブ付きのインターフェイスを作成する<rating>代わりに、 と などのディレクティブのペアを実装して、次のように使用することもできます。<div><span><tab><tab-page>

<tab>
  <tab-page title="Tab 1"> tab content goes here </tab-page>
  <tab-page title="Tab 2"> tab content goes here </tab-page>
</tab>

これこそが、HTML を拡張するディレクティブの真の力です。これは、「一般的な」ディレクティブのみを作成する必要があるという意味ではありません。アプリケーションに固有のコンポーネントを作成できますし、作成する必要があります。したがって、質問に戻る<loggedinuser>と、コントローラーに情報を提供する必要なく、ログに記録されたユーザーの名前を表示するタグを実装できます。しかし、そのためにグローバル変数に頼るべきではありません。それを行うAngularの方法は、サービスを利用してその情報を保存し、それをディレクティブに挿入することです。

app.controller('MainCtrl', function($scope, userInfo) {
  $scope.logIn = function() {
    userInfo.logIn('Walter White');
  };

  $scope.logOut = function() {
    userInfo.logOut();
  };
});

app.service('userInfo', function() {
  this.username = ''
  this.logIn = function(username) {
    this.username = username;
  };
  this.logOut = function() {
    this.username = '';
  };
});

app.directive('loggedinUser', function(userInfo) {
  return {
    restrict: 'E', 
    scope: true,
    template: '<h1>{{ userInfo.username }}</h1>',
    controller: function($scope) {
      $scope.userInfo = userInfo;
    }
  };
});

ここでプランカー。

強力で再利用可能なディレクティブの作成を開始したい場合は、ディレクティブに関するAngular 開発者ガイドを参照してください。

于 2013-10-01T03:35:25.373 に答える