【问题标题】:AngularJS - alternative use for isolated scope expressions ("&")AngularJS - 隔离范围表达式(“&”)的替代用途
【发布时间】:2015-06-21 20:32:28
【问题描述】:

我知道"&" 绑定用于将方法(表达式)传递给指令隔离范围,因此指令将能够在需要时执行它。

很多时候我需要将相同的表达式从我的主控制器“传递”到嵌套指令(2-3 层),深度超过一层。这就是为什么我自己不喜欢为此目的使用"&"。对我来说,使用"=" 绑定发送“回调”效果更好。但这不是一个问题。

问题是:
为什么,除了传递函数,我还可以使用"&"? 我可以有这样的东西:my-directive-click="clickCount +=1"

【问题讨论】:

    标签: angularjs angularjs-directive isolate-scope


    【解决方案1】:

    & 更多的是允许您处理表达式,更重要的是(在我看来)允许您将参数放入调用父级的范围内。

    例如,如果您有:

    scope: {
        something: '&'
    } 
    

    然后在那个指令模板中你可以这样做:

    <select ng-model="selection" ng-change="something({$item: selection})" ...>
    

    此指令的调用者/用户可以在传递给something 的表达式中访问 $item,即 $item 位于其范围内。

    例如

    <my-dir something="myOwnVar = $item + 1"></my-dir>
    

    这里有一个例子,包括链接(&amp; 表达式的多个嵌套调用): http://plnkr.co/edit/j4FCBIx0FVz4OT0w50bU?p=preview

    【讨论】:

      【解决方案2】:

      实际上,&amp; 意味着单向数据绑定。

      所以= 是双向数据绑定,这意味着对指令所做的更改将持续到原始对象。

      @ 只是一个字符串。

      &amp; 很特别。问题是它为您的值创建了一个 getter,在调用函数的情况下,getter 实际上调用了该函数。我倾向于在 DDO 上执行此操作:

      .directive('myDirective', function() {
        return {
          restrict: 'E',
          scope: {      
            getParameters: '&?params'
          }
      

      因此,通过这种方式,绑定到scope 的值是getParameters(很明显是一个getter),但在指令元素上,您只会将其称为params

      <my-directive params="ctrl.params">
      

      尽管您的问题含糊不清,即使您可以按照您的要求进行操作,但我认为最好在指令中执行此操作,而不是按照您建议的方式。

      我希望这会有所帮助。

      【讨论】:

      • 我没有将&amp; 视为吸气剂。这一直是我的一种表达方式。这样,即使我需要“获取”值,我也会尝试更新状态或在“父”控制器上执行行为。 &amp; 即使是“get”的问题是,如果要获取值,我需要从 2 级嵌套指令(一个或多个参数)传递参数,这比我头疼​​...我没有找到简单的方法去做吧。但是使用“=”它很容易工作。顺便说一句,我认为“=”仅在“引用类型”的情况下才是“双向绑定”。如果指令更改它,我认为父级的值类型不会改变,但也许我在这里错了:)
      • 如果你传递参数来获取东西,那么你应该使用服务恕我直言。关于您的想法,= 如果按照指令完成,将在父级上持续更改。检查此 plunker 以了解您的关注:plnkr.co/edit/DbYYbAsCc5T2XdsRJpSw?p=preview
      • @AntonioLaguna 是的,如果你传递一个像字符串或数字这样的原语,那么你的指令将无法在父范围内修改它。如果你将你的原语包装在一个对象中,它将被修改。
      • @szydan 我粘贴的 plnkr 使用的是原语,而不是对象。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-13
      • 1970-01-01
      • 2014-05-26
      相关资源
      最近更新 更多