Question

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

是否有义务使用“小写”指令？

这是工作：

// 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规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的camelCase规范化名称（例如ngModel）来引用指令。但是，由于HTML不区分大小写，我们通过小写形式引用DOM中的指令，通常使用DOM元素上的划线分隔属性（例如ng-model）。

规范化过程如下：

从元素/属性的前面剥离x-和data-。兑换   ：， - 或_分隔名称为camelCase。

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

并且命名是角度惯例。如果你不想要，你应该尝试另一个JS框架。

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

template : <subjects-list><subjects-list>代替subjectsList

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

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

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

1 个答案: