angularjs - Angular "="范围不适用于驼峰命名法

Question

我是指令的范围属性

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

<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 )

但是当我使用 x-show 作为属性名称时，该指令根本不会加载 bool 数据。

<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: "="
      }
    };
  });

谁能解释一下为什么吗？

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

Answer 1

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

来自 HTML5 spec :

Attribute names beginning with the two characters "x-" are reserved for user agent use and are guaranteed to never be formally added to the HTML language. For flexibility, attributes names containing underscores (the U+005F LOW LINE character) are also reserved for experimental purposes and are guaranteed to never be formally added to the HTML language.

因此请避免使用 x- 作为普通属性名称。 :)