角度指示が表示されない

Question

角度指示には少し問題がありますが、現在は機能していますが、その理由はわかりません。私はそれが私が見落としているかなり簡単な問題だと思う、多分あなたは私を助けることができます。

ディレクティブは、このように定義されています

angular.module('directives', []) 
    .directive('my-directive', function() { 
     return { 
      restrict: 'AE', 
      scope: { 
       name: '=name' 
      }, 
      template: '<h1>{{name}}</h1>' 
     }; 
    }); 

その後index.cshtml：

<my-directive name="test"></my-directive> 

Application.js：

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

そして、ここでは

angular.module('controllers', ['apiServices', 'directives']) 
    .controller('homecontroller', function($scope, $resource, webApiService, $log, $translate, $localStorage, $sessionStorage) { 

controllers.jsです

OKはdirectives.jsがロードされていることを確認します。そうでない場合は、application.jsが 'unknown module'について言います。コンソールにエラーメッセージは表示されません。ただ表示されません。何か案は？

---

EDIT指摘したように、私はキャメルケースにディレクティブの名前を変更しませんが、まだ運

：

<my-directive name="John Doe"></my-directive> 

そして

.directive('myDirective', function() { 

しかし、何もありませんまだ表示されています。

EDIT

問題は、角度は、オブジェクトが属性ではなく、文字列リテラルに渡されることを期待していることです。 person = {name： 'John'}というオブジェクトを作成する場合は、personを渡し、{person.name}}を記述します（属性person + scope var personにも名前を付けたものとします）。

Answer 1

正規化の間に、角はの区切りの名前をcamelCaseに変換します。JS内のディレクティブを指定して

だから、キャメルケースを使用します。

.directive('myDirective', function() { 

Fiddle

Answer 2

をあなたのディレクティブは、あなたのhtmlで、その後キャメルケース

.directive('myDirective', function() { 

でなければならない、あなたのそれをmy-directiveまたは01と呼ぶかどうかは自由です

はどちらも私はあなたがすでにこれを考え出した確信しているが、あなたは

scope: { 
    name: '@' 
} 

する名前のためのあなたのスコープの定義を変更する場合は、次にできるようになり、有効な

<my-directive name="test"></my-directive> 
<myDirective name="test"></myDirective> 

Answer 3

です文字列を渡す。 '@'は属性を補間し、 '='はそれを束縛します。さらに、スコープ変数と同じ場合は、属性名を含める必要はありません。

Answer 4

これをフォローアップするだけで、自分のディレクティブを動作させるには次の方法を使用しなければなりませんでした。

<my-directive name="test"></my-directive> 

Answer 5

問題はディレクティブの定義にあるようです。あなたはAngularがオブジェクトを期待していることをあなたの質問で指摘します。これは "="スコープに当てはまりますが、 "@"スコープには当てはまりません。 "@"スコープでは、Angularは文字列のみを要求します。私は以下のスニペットを作成しました。

あまりにも多くのモジュール

あなたが複数のアプリケーションでディレクティブを再利用している場合を除き、そのための新しいモジュールを作成しないでください。アプリケーション用に作成したモジュールにディレクティブ定義を追加します。以下の例では、 "angular.module（moduleName）"を使用してモジュールを呼び出しました。引数が1つだけの場合、新しいオブジェクトを作成するのではなく、既存のオブジェクトを返します。これは、コードを複数のファイルに分割する方法です。

を注意する

物事は次のことがわかります。

1. アプリ変数にモジュールをロードする必要はありません。毎回シングルトンを呼び出すことは、メモリ管理上、実際にはより安全で簡単です。
2. この指示は、すでに述べたように、ラクダの場合です。
3. name属性をオブジェクトではなく文字列値に設定しています。これは "@"スコープ設定のために機能します。
4. divはng-app = 'MyApp'に設定されています。これは通常html要素に設定されていますが、スタック交換でDOMを混乱させたくありませんでした。 ng-appディレクティブは任意の要素に設定でき、そのモジュールに関連付けられているディレクティブは、その要素の有効範囲内にあるすべての要素に適用されます。 ng-appディレクティブがなければ、Angularはどのモジュールをページ上で実行するかを知りません。あなたは一人ひとりディレクティブまたはコントローラ用の別のモジュールを持っている場合は

   インジェクションを使用して

   //app.js - this defines the module, it uses two parameters to tell the injector what to do. 
    
   angular.module('MyApp',[]); 
    
   
    
   //directive.js stored elsewhere 
    
   //this calls back the module that has been created. It uses one parameter because the injector is no longer needed. 
    
   angular.module('MyApp').directive('myDirective', function() { 
    
        return { 
    
        restrict: 'AE', 
    
         scope: { 
    
         name: '@' 
    
        }, 
    
        template: '<h1>{{name}}</h1>' 
    
        }; 
    
   });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
    
       
    
   <div ng-app="MyApp"> 
    
   <h1>Successful Load</h1> 
    
   <my-directive name="test"></my-directive> 
    
   <p>By applying the directive definition to the MyApp module, the MyApp module knows to activate the directive within this scope. In this form, it does not get injected.</p> 
    
   </div>

は、それぞれがアプリケーションのモジュール定義の中に注入しなければなりません。これはエラーのための多くの余地を残します。ベストプラクティスとしては、必要に応じて新しいモジュールを作成し、そのモジュールを1つのアイテムではなく、関連する機能のグループ用のコンテナにします。

以下のコードは、適切な注入を示しています。

angular.module("MyApp", ['ReusableDirectives']); 
 
angular.module("MyApp").directive("myDirective", function(){ 
 
    return { 
 
    restrict: "AE", 
 
    scope: { name: "@" }, 
 
    template: "<p>This is the directive I defined in the example above. It uses <u>the same module</u> as my main application, because it is not going to be reused over and over again. In fact, I will need it just for this application, so I don't need to complicate things with a new module. This directive takes an attribute called 'name' and if it is a string allows me to manipulate the string within my templates scope to do things like this: {{'hello ' + name + '!'}}</p>" 
 
    }; 
 
}); 
 
angular.module("ReusableDirectives", []); 
 
angular.module("ReusableDirectives").directive("reusableDirective", function(){ 
 
    return { 
 
    restrict: "E", 
 
    template: "<p>This is a directive that I intend to use in many, many applications. Because I will reuse it so much, I am putting it in a separate module from my main application, and I will inject this directive. This is the only reason that this directive is not in the same module as the one I defined above.</p>" 
 
    }; 
 
}).directive("reusableDirective2", function(){ 
 
    return { 
 
    restrict: "E", 
 
    template: "<p>This is a second directive that I intend to use in multiple applications. I have stored it in a module with the first directive so that I can freely inject it into as many apps as I like.</p>" 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="MyApp"> 
 
    <h1>Successful Load</h1> 
 
    <my-directive name="Johnny"></my-directive> 
 
    <p>By applying the directive definition to the MyApp module, the MyApp module knows to activate the directive within this scope. In this form, it does not get injected.</p> 
 
    <h3>Injected Directives</h3> 
 
    <reusable-directive></reusable-directive> 
 
    <reusable-directive2></reusable-directive2> 
 
</div>

それをシンプルに保ちます。アプリケーション用の単一モジュールにディレクティブを定義します。その作業が完了したら、別のアプリケーションでディレクティブが再度必要な場合は、ベルトの下で角運動をした後、その時にリファクタリングと注射を試してみてください。

あなたは明るい未来があり、良い仕事を続けてください！