AngularJS：开发可编辑输入指令并存储初始值以判断值变更

我明白你想要做的是：开发一个Angular指令，让输入框能判断当前输入值是否和初始值（也就是页面启动时通过GET请求获取并设置的值）不一样。先看看你目前的代码片段：

// editable-input-directive.js
angular.module("shared.directives")
.directive("editableInput", function() {
  return {
    require: "?ngModel",
    scope: { value: "@" },
    restrict: "E",
    template: '<div class="inputWithIcon"> <input ng-model="value" ng-change="onChange()"> <i class="icon...'
  };
});

现在要实现“检测值是否与初始值不同”的功能，我给你调整一下代码，同时优化一些细节：

改进后的完整代码 #

// editable-input-directive.js
angular.module("shared.directives")
.directive("editableInput", function() {
  return {
    require: "?ngModel",
    scope: { 
      value: "@",
      onValueChanged: "&" // 可选：暴露变化回调给父组件
    },
    restrict: "E",
    template: `
      <div class="inputWithIcon"> 
        <input ng-model="localValue" ng-change="checkChange()"> 
        <i class="icon..."></i>
      </div>
    `,
    link: function(scope) {
      // 保存启动时的初始值（来自GET请求的初始设置）
      scope.initialValue = scope.value;
      // 用本地变量绑定ngModel，避免直接修改父作用域的单向绑定值
      scope.localValue = scope.value;

      scope.checkChange = function() {
        // 对比当前值与初始值，判断是否有变化
        scope.isChanged = scope.localValue !== scope.initialValue;
        console.log("输入值是否已修改：", scope.isChanged);
        
        // 如果需要通知父组件变化状态，调用回调函数
        if (scope.onValueChanged) {
          scope.onValueChanged({ 
            hasChanged: scope.isChanged, 
            currentValue: scope.localValue 
          });
        }
      };
    }
  };
});

关键细节说明 #

• 用localValue作为输入框的ng-model：因为@是单向字符串绑定，直接修改父作用域传入的value会导致数据不一致，本地变量能避免这个问题
• 初始化时保存initialValue：确保我们对比的是页面启动时通过GET请求设置的原始值，而不是中途修改后的临时值
• 暴露变化状态给父组件：通过onValueChanged回调，父组件可以根据变化状态做后续操作（比如显示保存按钮、提示用户未保存修改等）
• 可选样式绑定：如果需要在模板里直观展示变化状态，可以给输入框加ng-class：

  <input ng-model="localValue" ng-change="checkChange()" ng-class="{ 'input-changed': isChanged }">
  

  然后在CSS里定义input-changed的样式（比如红色边框），用户一眼就能看出输入值已修改。

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