Угловая директива не показана

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 nags о «неизвестном модуле». В консоли нет сообщений об ошибках, вещь просто не отображается. Есть идеи?

---

EDIT

Так как было указано, я изменил название директивы для верблюжьего, но до сих пор не повезло:

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

И

.directive('myDirective', function() { 

Но ничего показывая.

РЕДАКТИРОВАТЬ

Проблема заключается в том, что угловой ожидает, что объект будет принят в атрибут, а не строка буквальным. Если вы создадите объект person = {name: 'John'}, передайте его, а затем напишите {{person.name}} (предположим, что мы также назвали человека с атрибутом + областью var).

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, но я не хотел связываться с DOM на Stack Exchange. Директива 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>

Использование Injection

Если у вас есть другой модуль для каждого и каждой директивы или контроллера, каждый из которых должен быть введен в определение модуля приложения. Это оставляет много места для ошибок. В качестве наилучшей практики при необходимости создайте только новый модуль и сделайте модуль контейнером для группы связанных функций, а не одного элемента.

Приведенный ниже код демонстрирует правильную инъекцию.

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>

Держите его просто. Определите свои директивы для одного модуля для вашего приложения. После того, как вы это сделаете и будете работать, если вам понадобится директивы снова в другом приложении, рефакторинг и эксперимент с инъекциями в то время после того, как у вас будет еще одна упрямая практика под вашим поясом.

У вас есть светлое будущее с Угловым, не отставайте от хорошей работы!