Question

我想将产品的ID传递给类似的指令：

<widget product-id="product.id"></widget>

我不喜欢使用花括号：

<widget product-id="{{product.id}}"></widget>

因为它更冗长，我想匹配ng-model使用的风格。

我想使用隔离范围，以便我不会意外地修改窗口小部件中的product.id。

如果我使用：

scope {
  productId: '@'
}

然后在我的指令模板中：{{productId}}为我提供了字符串"product.id"

如果我使用：

scope {
  productId: '&'
}

我在指令模板{{productId}}中看不到输出，据我所知，&用于绑定函数而不是属性。

如果我使用：

scope {
  productId: '='
}

我得到了我想要的确切值（一个数字），但这不是这种双向绑定，并且容易在更改widget中的product.id吗？

Answer 1

我担心没有适合您需要的装订，您可以试试这个：

link:function(scope, element, attr){
          scope.productId = scope.$parent.$eval(attr.productid);
}

但不推荐这种方法

DEMO

推荐的方法是在html中使用@绑定和{{}}

  scope:{
    productId: '@'
  }

您的HTML：

<widget product-id="{{productId}}"></widget>

DEMO

Answer 2

如果您想避免双重卷曲，可以使用$parse自行处理Angular expression：

表达式是通常放置的类似JavaScript的代码段在诸如{{expression}}之类的绑定中。表达式由。处理 $解析服务。

要在指令中使用$parse，您需要提供一个范围（上下文）来解析。由于您使用的是隔离范围，product.id的值将在指令的父级范围内 - 因此我们将使用scope.$parent。

以下是一个例子：

 myApp.directive('widget', function ($parse) {
    return {
        restrict: "E",
        scope: {
            productId: '@'
        },
        link: function(scope, element, attr) {          
               nvalue = $parse(scope.productId)(scope.$parent);
               console.log("parse result",nvalue);
        }         
    };
});

demo fiddle

如何通过隔离范围访问对象属性而无需双向绑定？

2 个答案: