Angular指令中attrs.$observe转换JSON出现‘Unexpected end of JSON’错误

我太懂这种闹心的感觉了——明明最后转换出来的对象能用，但控制台飘着的红错误提示总是让人心里发慌。咱们来拆解问题、搞定它：

问题根源 #

你遇到的情况大概率是指令初始化阶段的空值/不完整JSON触发了解析失败。attrs.$observe会在指令刚启动时就触发一次，这时候value可能是空字符串、undefined，或者还没完全渲染好的不完整JSON片段，这时候调用angular.fromJson()自然会抛出"Unexpected end of JSON"的错误。等后续正确的"["a","b","c"]"值传过来时，第二次$observe回调执行，解析成功，所以你能正常用转换后的对象，但初始的错误已经留在控制台了。

解决方案1：添加入口校验+异常捕获 #

在解析前先过滤无效值，并用try-catch包裹解析逻辑，把错误控制在可控范围内：

link: (scope, element, attrs) => {
  attrs.$observe('options', value => {
    // 先过滤空值或空白内容
    if (!value || value.trim() === '') {
      scope.stored_options = []; // 设置兜底的空数组
      return;
    }
    try {
      scope.stored_options = angular.fromJson(value);
    } catch (error) {
      console.warn('解析options的JSON失败:', value, error);
      scope.stored_options = []; // 出错时也给个默认值
    }
  });
}

解决方案2：改用双向绑定替代字符串绑定 #

既然你最终要的是数组，不如直接用Angular的双向绑定（=），让框架自动帮你处理JSON解析，省去手动转换的麻烦：

// 修改scope的绑定方式
scope: { options: '=', },
link: (scope, element, attrs) => {
  // 直接监听options的变化，不用手动解析
  scope.$watch('options', value => {
    scope.stored_options = value || [];
  });
}

使用指令时，父组件直接传递数组即可，不用转成JSON字符串：

<your-directive options="parentScopeArray"></your-directive>

这种方式既避免了解析错误，也让代码更简洁直观。

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