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作为属性名时，该指令根本不加载布尔数据。

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

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

因此，请避免将x-用于普通属性名称。：）

Angular“=”范围不适用于camelCase

1 个答案: