angularjs - 在 Angular 中与嵌套指令共享隔离范围

标签 angularjs angularjs-directive angularjs-scope

我想要一个可重用的自定义指令,并创建一个隔离范围,以便可以在任何地方使用它(只要使用者使用该指令定义的 API)。然后,我希望消费者能够轻松地混合和匹配适合主要可重用指令的不同可重用部件。

我正在处理的情况是一个下拉菜单。 main 指令将隔离范围并为整个下拉列表定义 API。内部指令将允许消费者选择是否需要打开菜单的按钮、打开菜单的搜索框/输入字段等。然后他们还可以选择使用什么菜单样式:

<dropdown items="..." selected-item="...">
  <dropdown-button>(Transcluded button text here)</dropdown-button>
  <dropdown-icon-list></dropdown-icon-list>
</dropdown>

父指令/ Controller 将处理内部部分的状态/通信(即按钮可能触发“打开”状态,并且列表将通过打开进行响应)。换句话说,父指令将为使用者提供一个定义行为并将范围与页面其余部分隔离的位置,而嵌套指令将根据其 Angular 色更改共享状态/响应共享状态的更改。

实际上,我通过在主“下拉”指令上使用隔离范围,然后使用嵌套指令继承范围(没有在嵌套指令上指定“范围:...”)来完成此工作。但是,在 Angular 1.2 中,情况发生了变化,父级的隔离作用域真正被隔离了——子级继承了父级指令之外存在的作用域,而不是共享其隔离的作用域。

Angular 的方法是什么来完成这样的事情?

我已经开始改造现有的代码,以便与嵌套的子级指令共享父级指令中的 Controller ,但是一旦我遇到子级指令需要监听共享更改的情况,我觉得这是错误的方法。范围...我能看到做到这一点的唯一方法是将回调函数从嵌套指令传递到共享 Controller 中,该 Controller 将绑定(bind)到 $scope.$on 方法。似乎低头走错了路。

最佳答案

AngularJS 提供了 3 种类型的前缀。

  1. “@”(文本绑定(bind)/单向绑定(bind))
  2. "="(直接模型绑定(bind)/双向绑定(bind))
  3. “&”(行为绑定(bind)/方法绑定(bind))

所有这些前缀都从指令元素的属性接收数据并提供指令之间的通信。请访问以下链接了解类似问题。

访问https://stackoverflow.com/a/33024209/4348824

关于angularjs - 在 Angular 中与嵌套指令共享隔离范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20362927/

相关文章:

javascript - 如何在 formData 中追加数组,其中包含 2 个带有键的值

javascript - 将焦点放在添加的项目上

javascript - 如何在某些功能后正确重置 angularjs v1 工厂

javascript - "TypeError: Cannot read property ' jqcloud中默认' of undefined"

javascript - $watch 指令中的元素宽度

javascript - 在 AngularJS 中动态加载 View 和 Controller

javascript - 从 Controller 注入(inject) Angular 元素但不按指令工作

javascript - AngularJS 搜索表单抛出未定义的错误

forms - 当 AngularJS 表单无效时禁用提交按钮

javascript - AngularJS ng-repeat 不绑定(bind)属性中使用的表达式的下一个值