Angular嵌套指令通信

Question

我有一个如下所示的指令：

<div ng-controller="searchController" searchbar>
   <input type="text" id="searchfield" ng-model="myVar">
   <div searchresult>
       <div ng-repeat="data in data.menu | filter: myVar">
           {{data.title}}
       </div>
   </div>
</div>

有一个名为 searchController 的控制器，以及名为 searchbar 和 searchresult 的 2 个指令。

如何让 searchbar 指令到运行 searchresult 指令中的函数？我想把 require: "^searchresult" 放在 searchbar 指令中并调用它的函数。这是正确的做法吗？如果那里没有 searchresult 怎么办？

这里是详细场景：

当用户在输入字段中键入内容时，搜索结果会通过过滤器进行更新。因此 searchresult div 的高度改变了。

searchresult指令如何即时知道高度的变化和运行所需的功能？

Answer 1

searchResult 可以引用 searchBar 而不是相反。来自文档

^ - Locate the required controller by searching the element and its parents. Throw an error if not found.

另请参阅 ^? 以了解可选的依赖项。请参阅 compile 文档。

如果您详细说明您的场景，我们可以提供更好的帮助。

Update：根据你描述的场景，你可以直接在searchresult指令中观察myVar 属性，只要它改变你就可以触发调整结果大小的函数。

假设 searchresult 指令不创建隔离范围。你可以试试，这样的代码在你的指令link函数

里面

scope.$watch('myVar',function(newValue) {
   $timeout(function() {
       //do some work here
   },0);
});

超时有帮助，因为我们无法确定列表的呈现何时完成。

Angular嵌套指令通信

Angular nested directive communication

angularjs

angularjs-directive