gpt4 book ai didi

javascript - 使用 $attrs 评估其中带有花括号的属性

转载 作者:行者123 更新时间:2023-11-29 14:41:22 30 4
gpt4 key购买 nike

我正在创建一个使用以下标记的文件上传指令。

<file-upload
name="myUploader"
upload-url="{{$root.apiSettings.apiUrl}}/files"
auto-upload="true"
></file-upload>

我正在尝试像这样在指令 Controller 中获取 upload-url 属性。

$scope.uploadUrl = $attrs.uploadUrl

显然这行不通,因为我只是得到了带有大括号的未求值表达式。我尝试使用 $scope.$eval 对其进行评估,但出现解析错误,指出 { 是第 2 列中的无效字符。

接下来我尝试使用 ng-attr-upload-url 和不使用 $eval。

我通常会尽量避免使用隔离作用域绑定(bind),这可能会起到作用,因为我的指令中的大多数属性一次都是简单的,一种方式绑定(bind),我想减少 watch 的数量,所以如果这个可以使用不起眼的 $attrs 集合来实现,我很想知道如何实现。

最佳答案

在指令中,作用域绑定(bind)发生在链接的后期阶段, Controller 执行得非常早,所以如果你想在指令的 Controller 中获取指令属性中提供的值,你需要使用 $interpolate 在你的 Controller 中,考虑到你没有使用隔离范围。

要在 Controller 中获得正确的值,您可以使用 $parse$interpolate,具体取决于您通过指令的属性传递的内容。如果您只传递了属性的名称,那么您可以使用 $parse,否则如果您有一个内插字符串,则需要使用 $interpolate,它会在给定的上下文中执行。

在您的情况下,您需要像下面这样使用 $interpolate

在 HTML 中

  <body ng-app='app' ng-controller='mCTRL'>
<h1>Hello Plunker!</h1>
<file-upload
name="myUploader"
upload-url="{{url}}/files"
auto-upload="true"
></file-upload>
</body>

您的指令应如下所示

app.directive('fileUpload',function(){

return{
restrict:'EA',
controller:function($scope,$attrs,$interpolate){
var myUrl=$interpolate($attrs.uploadUrl)($scope)
},
link(scope,elem,attrs,ctrl){

}

}

})

关于javascript - 使用 $attrs 评估其中带有花括号的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37913102/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com