AngularJS组件绑定在缩小时未定义

Question

我的应用有问题。当我使用grunt serve 构建它时，一切正常，但是当我尝试将它构建到 dist 时，似乎我的组件的绑定以某种方式失败了。代码如下所示：

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>

（应该从它的父级传播的第二个代码示例 - 在 grunt serve 上工作，在 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>

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

@UPDATE

我尝试调试它，发现了一些非常有趣的东西。在构建之前，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" 解析为 readonly。