angular-meteor：routes.js 和组件之间指令命名空间中的奇怪行为

Question

我不明白为什么我们会有这种行为？

是否有义务使用 "lowercase" 指令？

这是工作:

// client/routes.js
angular.module('socially').config(function ($urlRouterProvider, $stateProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $stateProvider     
    .state('subjects', {
      url: '/subjects',
      template: "<subjectslist></subjectslist>"
    })
    ...

// client/subjects/subjects-list/subjects-list.html
angular.module('socially').directive("subjectslist", function() {
  return {
    ...

这是工作:

// client/routes.js
angular.module('socially').config(function ($urlRouterProvider, $stateProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $stateProvider     
    .state('subjects', {
      url: '/subjects',
      template: "<blablabla></blablabla>"
    })
    ...

// client/subjects/subjects-list/subjects-list.html
angular.module('socially').directive("blablabla", function() {
  return {
    ...

1) 为什么这不起作用？

// client/routes.js
angular.module('socially').config(function ($urlRouterProvider, $stateProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $stateProvider     
    .state('subjects', {
      url: '/subjects',
      template: "<subjects-list></subjects-list>"
    })
    ...

// client/subjects/subjects-list/subjects-list.html
angular.module('socially').directive("subjects-list", function() {
  return {
    ...

2) 为什么这不起作用？

// client/routes.js
angular.module('socially').config(function ($urlRouterProvider, $stateProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $stateProvider     
    .state('subjects', {
      url: '/subjects',
      template: "<subjectsList></subjectsList>"
    })
    ...

// client/subjects/subjects-list/subjects-list.html
angular.module('socially').directive("subjectsList", function() {
  return {
    ...

谢谢

Answer 1

在angular官方网站

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase.

https://docs.angularjs.org/guide/directive

命名是angular-约定。如果你不想，你应该尝试另一个 JS 框架。

更新答案： 在最后一个示例中，您需要创建正确的组件，如以下代码：

template : <subjects-list><subjects-list> 而不是 subjectsList

.state('subjects', { url: '/subjects', template: "<subjectsList></subjectsList>" })

因为当你在控制器中声明 subjectsList 指令时，Angular 将处理指令的名称并转换为 subjects-list 并在视图中找到它。

angular-meteor：routes.js 和组件之间指令命名空间中的奇怪行为

angular-meteor : weird behaviour in directive namespace between routes.js and components

angularjs

meteor

angular-meteor