Angular ng-repeat 中的表达式在引用父作用域时未呈现

Question

所以我正在 Angular 中进行弹性搜索实现。到目前为止一切顺利，但我运行遇到了一个奇怪的情况。每个结果都有一个可以由用户生成的关联标签。

这是我的表格和输入：

<form ng-submit="search($event)" class="queryBuilder ng-pristine ng-valid">
    <input type="text" ng-model="searchQuery" class="ng-pristine ng-untouched ng-valid">
</form>

结果显示得很好，标签也是如此。当我点击标签时，问题就出现了。最初，问题是在 repeat 中，他们无法访问上面的 searchQuery 模型，所以我只是将其更改为目标 $parent.searchQuery 并且这样做有效但是我一这样做就挖掘了这个表达式 item.tag 不再有效。现在它正在输出实际的大括号和所有内容。

<button ng-repeat="item in items" ng-click="$parent.searchQuery = $parent.searchQuery + ' {{item.tag}}'; search();" class="tag ng-binding ng-scope">Tag Name</button>

我是 Angular 的新手，我已经使用 jQuery 十亿年了，所以如果我错过了一些非常基本的东西，我提前道歉。我四处搜索，可以找到范围相关 material 但不是 ng-repeat 内与目标父范围冲突的表达式。有什么想法吗？提前致谢！

Answer 1

字符串文字（在本例中为 searchQuery）和基元不能在 Angular 或 Javascript 中的嵌套范围内引用。阅读关于此的著名教程 https://github.com/angular/angular.js/wiki/Understanding-Scopes

您使用的 $parent 最初是有效的，但是当您附加 ng-repeat 它开始损坏，因为 ng-repeat 创建了一个新的范围，所以现在您的 $parent 属性引用了不同的范围。

关于如何修复它：在控制器中定义一个对象，例如：

$scope.globalData = {};

现在用这个对象引用你的每个 ng-model 以避免范围问题：

<form ng-submit="search($event)" class="queryBuilder ng-pristine ng-valid">
    <input type="text" ng-model="globalData.searchQuery" class="ng-pristine ng-untouched ng-valid">
</form>

你的 ng-repeat 喜欢这个：

<button ng-repeat="item in items" ng-click="globalData.searchQuery = globalData.searchQuery + ' {{item.tag}}'; search();" class="tag ng-binding ng-scope">Tag Name</button>

这将引用您的搜索查询模型 Javascript Object 和 Javascript 中的 Object 可以被子实例引用，或者 [=46] =],可以在嵌套的$scope.

中引用

只需确保将 gloabalData（或您喜欢的任何名称）定义在顶级控制器中，例如添加到 <html> 或 <body> 标记的控制器，以便它的范围可以在整个应用程序中使用。当然，您现在不必使用 $parent :-)

此外，您可以像这样清理 ng-click 表达式：

ng-click="globalData.searchQuery = globalData.searchQuery + ' ' + item.tag; search();"

Answer 2

您可以在您的控制器上创建一个方法：

$scope.clickItem = function(item){
    $scope.searchQuery += ' ' + item.category;
    $scope.search();
};

查看：

<button ng-repeat="item in items" ng-click="clickItem(item)" class="tag">foundation</button>

Angular ng-repeat 中的表达式在引用父作用域时未呈现

Angular expression inside an ng-repeat not being rendered when parent scope referenced

javascript

expression

directive

angularjs

angularjs-ng-repeat