Angular 1.x：如何将指令的cleanInputValue赋值到控制器的$scope.keywords

我来帮你解决这个问题——不用绑定到视图，只需要把指令内部的cleanInputValue传递给控制器的$scope.keywords，这里有两种实用的实现方式，你可以根据自己的场景选择：

方案一：使用回调函数传递值（推荐，直接高效） #

这种方式通过在指令上定义一个回调属性，当cleanInputValue变化时主动把值传给控制器，逻辑清晰且耦合度低。

1. 自定义指令（如果是你封装了md-autocomplete） #

如果你的cleanInputValue是在自定义指令里处理的，给指令添加回调绑定：

angular.module('yourApp').directive('customAutocomplete', function() {
  return {
    scope: {
      // 定义回调函数，通过&符号接收外部传入的方法
      onCleanInputUpdate: '&'
    },
    link: function(scope, element, attrs) {
      // 监听指令内部的cleanInputValue变化
      scope.$watch('cleanInputValue', function(newCleanValue) {
        if (newCleanValue !== undefined) {
          // 调用回调，把clean值传递出去
          scope.onCleanInputUpdate({value: newCleanValue});
        }
      });
    }
  };
});

2. 控制器逻辑 #

在navsearchController里定义接收值的方法，把值赋值给$scope.keywords：

angular.module('yourApp').controller('navsearchController', function($scope) {
  $scope.keywords = '';

  // 接收指令传来的clean值
  $scope.updateKeywords = function(value) {
    $scope.keywords = value;
    // 这里可以加其他逻辑，比如触发搜索等
  };
});

3. HTML模板修改 #

在md-autocomplete上添加自定义指令和回调绑定：

<form id="searchbox" ng-controller="navsearchController as sc" title="Search this site" layout="row">
  <md-autocomplete 
    md-no-cache="true" 
    md-selected-item="sc.currentKeyword"
    custom-autocomplete
    on-clean-input-update="updateKeywords(value)"
    <!-- 其他md-autocomplete属性（比如md-search-text、md-items等） -->
  >
  </md-autocomplete>
</form>

方案二：使用共享服务传递值（适合多组件共享场景） #

如果你的项目里有多个组件需要用到这个cleanInputValue，用共享服务会更方便。

1. 创建共享服务 #

angular.module('yourApp').service('SearchDataService', function() {
  let _cleanInputValue = '';

  // 设置clean值的方法
  this.setCleanInput = function(value) {
    _cleanInputValue = value;
  };

  // 获取clean值的方法
  this.getCleanInput = function() {
    return _cleanInputValue;
  };
});

2. 指令中更新服务的值 #

angular.module('yourApp').directive('customAutocomplete', function(SearchDataService) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch('cleanInputValue', function(newVal) {
        if (newVal) {
          // 把clean值存入服务
          SearchDataService.setCleanInput(newVal);
        }
      });
    }
  };
});

3. 控制器中监听服务的值 #

angular.module('yourApp').controller('navsearchController', function($scope, SearchDataService) {
  // 监听服务中的clean值变化，同步到$scope.keywords
  $scope.$watch(() => SearchDataService.getCleanInput(), function(newVal) {
    $scope.keywords = newVal;
  });
});

这两种方案都不需要把cleanInputValue绑定到视图上，完全满足你的需求。如果只是单一的指令到控制器传递，方案一足够好用；如果有跨组件共享的需求，方案二更合适。

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