Microsoft Edge v41.x截断AngularJS 1.x表达式标记问题求助

没错，我见过不少开发者在使用Edge v41（基于旧EdgeHTML引擎的版本）搭配Angular 1.6时遇到过这种长属性表达式被随机截断的问题。这个问题属于旧版Edge的HTML解析引擎bug，当属性值是包含多个逻辑运算符的复杂Angular表达式时，就容易触发截断行为。

几个实用的解决思路： #

• 将复杂逻辑迁移到控制器：把模板里的长判断逻辑封装成控制器中的函数，这样模板里的属性值会变得非常简短，从根本上避开引擎的截断问题。举个例子：
  模板代码修改为：

  <button ng-disabled="isButtonDisabled()">提交</button>
  

  在对应的Angular控制器中添加函数：

  $scope.isButtonDisabled = function() {
    // 这里可以整理你的所有判断条件，避免模板里的长表达式
    return $scope.conditionOne || $scope.conditionTwo || $scope.conditionThree;
  };
  

• 升级Edge浏览器：Edge v41是很老旧的版本了，微软后来推出的Chromium内核Edge已经彻底修复了这类解析bug，升级到最新稳定版是最一劳永逸的解决办法。
• 提前计算状态变量：如果暂时无法升级浏览器，可以在控制器中提前计算好判断结果，用一个变量绑定到模板的属性上，比如：

  // 在控制器的合适位置（比如数据更新后）计算状态
  $scope.buttonDisabled = $scope.conditionOne || $scope.conditionTwo || $scope.conditionThree;
  

  模板里直接用：

  <button ng-disabled="buttonDisabled">提交</button>
  

小提示：你给出的示例里有个小笔误（重复了conditionTwo，还有conditonThree拼写错误），不过这并不是触发截断的原因，核心还是旧Edge引擎的处理bug。

内容的提问来源于stack exchange，提问作者msrameshp