2017-04-26 14 views
1

私は、私たちのサイトの角ページで使用したい汎用のdirectiveを作成しました。私は各ページに同じapp変数を使用させたくありません。このディレクティブをジェネリックに変更して、依存関係として追加するだけで済むようにするにはどうすればいいですか?角 - 汎用ディレクティブ

var app = angular.module('myapp', []); 

app.directive('helloWorld', function() { 
return { 
    restrict: 'AE', 
    replace: 'true', 
    scope: { 
    name: '@', 
}, 
template: '<h3 >Hello {{name}}</h3> ', 

    } 
    }; 
}); 
+1

ここで提供さ答えは理にかなっていると私は使用することをお勧めします何である間、質問はとにかく少し混乱であるように、私は感じています。 「各ページに同じアプリ変数を使用させたくない」というのは、複数の異なるアプリを実行しているということですか?一般的なパラダイムは、角型アプリの各「ページ」が部分的な見方で、コントローラは何の変更で、アプリではない。 – Claies

+0

言葉のよりよい方法は、どのように共通のリソースを作成するにはどの角のdevloper –

答えて

2

あなたは、commonモジュールを作成し、その上に自分のディレクティブを宣言し、アプリの各上のモジュールの依存関係として使用することができます。あなたのアプリケーションモジュールの依存関係にモジュールを追加することによって、あなたの指示と、あなたのcommonモジュールで宣言したすべてのプロバイダを使用できるようになります。

/common.module.js

;(function() { 

    var commom = angular.module('common', []); 

    commom.directive('helloWorld', function() { 
     return { 
      restrict: 'AE', 
      replace: true, 
      scope: { 
       name: '@', 
      }, 
      template: '<h3 >Hello {{name}}</h3> ', 
     }; 
    }); 

})(); 

/index.html

<html> 
... 
<body ng-app="myapp"> 

    <hello-world name="World"></hello-world> 

    <script src="angular.min.js"></script> 
    <script src="common.js"></script> 
    <script>  
     var app = angular.module('myapp', ['common']); 
    </script> 
</body> 
</html> 
+0

AHと共有できるので、トリックです静的な角度から新しい汎用モジュールを作成する –

関連する問題