javascript - AngularJS 组件绑定(bind)在缩小版上未定义

Question

我的应用程序有问题。当我使用 gruntserve 构建它时，一切都工作正常，但是当我尝试将其构建为 dist 时，我的组件的绑定(bind)似乎以某种方式失败了。代码看起来像这样:

angular.module('jsonParserApp')
.component('leafTemplate', {
  templateUrl: 'views/itemList.html',
  bindings: {
    readonly: '<',
    //other bindings (works properly)
  },
  controller: ['$scope', 'copiedValue', function($scope, copiedValue) {
    //code
    this.$onChanges = function(changesObj) {
      console.log('onChanges', changesObj);
    //code
    };
    //code
  }]
});

然后当我检查什么是值时 ctrl.readonly在 console.log 中它返回

{
  "readonly": {
    "currentValue": true,
    "previousValue": UNINITIALIZED_VALUE
  } 
}

但是，当我查看 grunt 的 dist 上记录的值时，它会返回

{
  "readonly": {
    "currentValue": undefined,
    "previousValue": UNINITIALIZED_VALUE
  } 
}

值得一提的是，该组件是递归构建的。 html 中的代码看起来或多或少像这样:(第一个代码示例将只读值初始化为 true 或 false，然后应该将其传播到子元素)

<ul ng-show="main.toggleInputTree" class="overflow-auto" flex>
  <li ng-repeat="(key, value) in main.inputJson">
    <leaf-template k="key" t="main.inputJson" i="{{$index}}" readonly="true" parent="$"></leaf-template>
  </li>
</ul>

(应该从其父级传播的代码的第二个示例 - 在 gruntserve 上工作，在 grunt 的 dist 上传播 - 不)

<ul ng-show="ctrl.displayChildren" ng-if="!ctrl.isString(ctrl.t, ctrl.k)">
  <li ng-repeat="(key, value) in ctrl.t[ctrl.k]">
    <leaf-template k="key" t="ctrl.t[ctrl.k]" i="{{$index}}" readonly="ctrl.readonly" parent="{{ctrl.parent + '.' + ctrl.k}}"></leaf-template>
  </li>
</ul>

问题是什么，为什么该值没有在缩小/丑化版本上传播？

@更新

我尝试调试它，发现了一些非常有趣的东西。构建之前，html 如下所示:

<leaf-template k="key" t="ctrl.t[ctrl.k]" i="{{$index}}" readonly="ctrl.readonly" parent="{{ctrl.parent + '.' + ctrl.k}}"></leaf-template>

在 dist 版本中，$templateCache 保存如下所示的 html

<leaf-template k="key" t="main.inputJson" i="{{$index}}" readonly parent="$"></leaf-template>

由于某些原因，readonly="ctrl.readonly" 被剪切为 readonly

Answer 1

将名称从 readonly 更改为其他有帮助的内容...实际上 readonly 是 HTML 输入的属性，因此 uglify 解析 readonly="ctrl.readonly" 只是只读。