角度“="范围不适用于camelCase

问题描述

我是指令的作用域属性

当我使用 show 作为 attr 名称时它工作正常.

It works fine when I use show as attr name.

<span ng-repeat="field in fields">
  <field-pill field="field" show="true"></field-pill>
</span>

app.js

angular.module('app',[]);

angular.module('app')
  .controller('AppCtrl', function($scope){
      $scope.fields = [1,2,3,4];
    });

angular.module('app')
  .directive('fieldPill', function () {
    return {
      template: '<div class="pill">{{field}}:{{show}}--<span ng-show="show">x</span></div>',
      restrict: 'E',
      scope:{
        field: "=",
        "show": "="
      }
    };
  });

(见这个 plunkr http://plnkr.co/edit/AcqmxeCerCOtGaw9dq9t?p=preview)

(See this plunkr http://plnkr.co/edit/AcqmxeCerCOtGaw9dq9t?p=preview)

但是当我使用 x-show 作为属性名称时，指令根本不加载布尔数据.

But the directive doesn't load the boolean data at all when I use x-show as the attribute name.

<span ng-repeat="field in fields">
  <field-pill field="field" x-show="true"></field-pill>
</span>

app.js

angular.module('app',[]);

angular.module('app')
  .controller('AppCtrl', function($scope){
      $scope.fields = [1,2,3,4];
    });

angular.module('app')
  .directive('fieldPill', function () {
    return {
      template: '<div class="pill">{{field}}:{{xShow}}--<span ng-show="xShow">x</span></div>',
      restrict: 'E',
      scope:{
        field: "=",
        xShow: "="
      }
    };
  });

谁能解释一下为什么?

(有关带有 x-show 的代码，请参阅此 plunkr http://plnkr.co/edit/2txoY3VaShH6WggnugcE?p=preview )

(See this plunkr for the code with x-show http://plnkr.co/edit/2txoY3VaShH6WggnugcE?p=preview )

推荐答案

我认为这与 x- 前缀有关.如果您将其更改为 mShow、m-show 之类的内容，它将起作用.

I think it is relating to the x- prefix. If you change it to anything like mShow, m-show, it will work.

来自 HTML5 规范:

以两个字符x-"开头的属性名称是保留的供用户代理使用，并保证永远不会被正式添加到HTML 语言.为了灵活性，属性名称包含下划线(U+005F LOW LINE 字符)也保留用于实验目的，保证永远不会被正式添加到HTML 语言.

所以避免使用 x- 作为正常的属性名称.:)

So avoid using x- for normal attribute name. :)

这篇关于角度“="范围不适用于camelCase的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！