Polymer中data-ng-change未触发问题咨询：与data-ng-blur对比

原因 #

AngularJS 的 ng-change 指令默认监听的是原生 <input> 元素的 change 事件，但 paper-input 是 Polymer 自定义 Web Component，它内部值变化时触发的是 Polymer 自身的 value-changed 事件（而非原生 change 事件），AngularJS 无法自动识别这个自定义事件，所以 ng-change 不会被触发。

另外，AngularJS 的双向绑定 ng-model 对原生表单元素有内置的适配逻辑，但对于自定义 Web Component，需要额外处理才能让值同步和事件触发正常工作。

解决办法 #

方法1：直接监听 Polymer 自定义事件

放弃使用 ng-change，转而在 paper-input 上绑定它原生的 value-changed 事件，直接调用你的控制器函数：

<paper-input 
  label="Test" 
  data-ng-model="item" 
  data-ng-blur="onBlur(x)" 
  on-value-changed="onChange($event.detail.value)">
</paper-input>

然后调整控制器里的函数，接收新值作为参数：

function onChange(newValue) {
  // 这里可以使用newValue做处理，或者直接访问$scope.item
  console.log('输入值变为:', newValue);
}

方法2：自定义 Angular 指令适配 ng-change

如果想继续使用 ng-change 保持代码风格一致，可以写一个自定义指令，让 AngularJS 能识别 paper-input 的值变化事件：

angular.module('yourAppModule').directive('paperInput', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 监听paper-input的value-changed事件
      element.on('value-changed', function(event) {
        var newValue = event.detail.value;
        // 手动更新ngModel的值，并触发digest循环
        scope.$apply(function() {
          ngModelCtrl.$setViewValue(newValue);
          // 如果存在ng-change属性，执行对应的表达式
          if (attrs.ngChange) {
            scope.$eval(attrs.ngChange);
          }
        });
      });
    }
  };
});

这样修改后，你原来的代码就能正常工作了：

<paper-input 
  label="Test" 
  data-ng-model="item" 
  data-ng-blur="onBlur(x)" 
  data-ng-change="onChange(item)">
</paper-input>

这里可以直接把 item 作为参数传入，因为值已经同步到作用域变量中了。

额外检查点

• 确保控制器里的 item 变量是在当前作用域中定义的（比如 $scope.item = ''），避免作用域继承导致的绑定失效。
• 如果使用的是 AngularJS 1.3+，可以尝试结合 ng-model-options 调整绑定的触发时机，但核心问题还是事件适配。

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