javascript - ngModel 的 angularjs 范围未按预期工作

Question

我在 angularjs 和 ionic-framework 中创建了自定义指令下拉菜单。在我的下拉菜单中，项目将在模式弹出窗口中打开，效果非常好。

但是我保留了带有清晰按钮输入框的搜索输入框，该输入框与 ng-model='search' 配合，如果我输入 ng-click= 则在按钮 ng-click 上“search=''” 比它工作得很好，但如果我放置函数并尝试从指令模块中删除，它就不起作用

在模板中

<input type="search" ng-model="search" placeholder="select city...">
<button ng-show="search.length" ng-click="clearSearch()" class="customIcon button button-icon ion-close-circled input-button"></button>

在指令模块中

$scope.clearSearch = function() {
    $scope.search = '';
}

然后它会给我错误

$scope.search is undefined

我只是对 $scope 感到非常困惑，我也想知道我如何才能知道任何工具或其他东西的范围

我还有另一个问题，我保留了两个相同的自定义指令，当第一个控件更改其值时，我想清除第二个指令中的选择，因为我也在执行 $watch 但我不明白我该怎么做做

我的笨蛋 http://plnkr.co/edit/GxM78QRwSjTrsX1SCxF7?p=preview

Answer 1

我没有使用 Ionic 的经验，但这些类型的问题通常与原型(prototype)继承在 JS 和 AngularJS 中的工作方式有关。

关于与 Angular 相关的原型(prototype)继承的精彩解释可以在 here 找到。 .

通常可以通过将属性移动到对象中来解决该问题:

$scope.viewModel = {};

$scope.clearSearch = function() {
  $scope.viewModel.search = '';
};

然后在 HTML 中需要的地方使用 viewModel.search:

<input type="search" ng-model="viewModel.search" placeholder="select city...">

演示: http://plnkr.co/edit/4SLfA1CjRWB1XazIhj9d?p=info