我正在创建一个使用以下标记的文件上传指令。
<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/