角度指令不显示

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' 
]); 

而这里的controllers.js

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

确定已加载directives.js，否则application.js会对'未知模块'进行唠叨。控制台中没有错误消息，只是不显示。有任何想法吗？

---

编辑

因此，作为中指出，我改变了指令名驼峰，但仍没有运气：

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

而且

.directive('myDirective', function() { 

但没有什么是显示尚未。

EDIT

问题是，角预计一个目的是要传递到属性，而不是字符串文字。如果你创建了一个对象person = {name：'John'}，把这个人传入，然后写{{person.name}}（假设我们命名属性person + scope var person）。

Answer 1

在正常化，角转换-分隔名称为camelCase。

因此，使用驼峰同时指定内JS指令：

.directive('myDirective', function() { 

Fiddle

Answer 2

你的指令必须骆驼套管

.directive('myDirective', function() { 

然后在你的HTML，你是免费的，不管称为my-directive还是myDirective

都是有效的

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

Answer 3

我敢肯定，你想通了这一点了，但如果你改变你的范围定义名称是

scope: { 
    name: '@' 
} 

，那么你就可以传递一个字符串。 '@'插入属性，'='将其绑定。此外，如果与范围变量相同，则不需要包含属性名称。

Answer 4

为了跟进这个问题，我不得不用下面的方法让我的指令工作。

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

Answer 5

问题似乎出现在指令定义中。你在你的问题中注意到Angular期待一个对象;这对于“=”范围是正确的，但对于“@”范围则不是。在“@”范围内，Angular只需要一个字符串。我在下面创建了一个片段。

模块太多

除非你重新使用多个应用程序的指令，不要为它创建一个新的模块。将指令定义添加到您为应用程序创建的模块。在我的例子中，我通过使用“angular.module（moduleName）”来回调模块...当只使用一个参数时，Angular返回现有对象而不是创建一个新对象。这就是我们如何将代码分成许多文件的方式。

件事情要注意

你会发现以下内容：

1. 你并不需要的模块加载到应用程序变量。每次调用Singleton实际上对内存管理来说更安全和简单。
2. 正如您已经注意到的那样，该指令是驼峰式的。
3. 我将name属性设置为字符串值而不是对象;这是因为“@”范围设置。
4. div设置为ng-app ='MyApp'。这通常设置为html元素，但我不想在Stack Exchange上弄乱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>

使用注射

当你对每一个指令或控制不同的模块，每一个都必须被注入到应用程序的模块定义。这给错误留下了很大的空间。作为最佳实践，只在必要时创建新模块，并将该模块作为一组相关功能的容器，而不是单个项目。

下面的代码演示了正确的注入。

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>

保持简单。在您的应用程序的单个模块上定义您的指令。一旦你完成了这个工作，如果你在另一个应用程序中再次需要指令，那么在你有更多的Angular实践之后，重构并尝试进行注射。

您与Angular拥有光明的未来，继续保持良好的工作！