Question

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

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

我试图像这样在指令控制器中获取upload-url属性。

$scope.uploadUrl = $attrs.uploadUrl

显然这不起作用，因为我只是得到了带有花括号的未评估表达式。我尝试使用$ scope。$ eval来评估它，但我得到一个解析错误，说{在第2列是一个无效的字符。

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

我一般都试图避免使用隔离范围绑定，这可能会起作用，因为我的指令中的大多数属性都是简单的一次，单向绑定，我想减少手表的数量，所以如果这样可以使用我想知道的简单$ attrs系列来实现。

Answer 1

在指令中，范围绑定发生在链接的后期阶段，控制器很早就会执行，因此如果要在指令的控制器中获取指令属性中提供的值，则需要使用$interpolate在您的控制器中，考虑到您没有使用隔离范围。

要在控制器中获得正确的值，您可以使用$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){

    }

  }

})

Answer 2

您可以通过下面显示的链接功能访问您的指令属性，您可以使用它来设置属性中的值

main.directive('fileUpload', function () {
    return {
    ...
    link: function ($scope, elem, attr) {

        $scope.uploadUrl = attr.upload-url; //note attr.upload-url might cause problems, not sure if you can have dashed attribute names

    }
};

}）;

Answer 3

如果将逻辑放在链接函数而不是控制器中，则传递给该链接函数的attrs参数的attrs.uploadUrl将已经为您内插。尽管Rishi提出的解决方案也可以工作，但我还是建议您解决这个问题。

version: '2'
services:
    rabbitmq:
        image: rabbitmq:management
        ports:
        - 5672:5672
        - 15672:15672
        environment:
        - RABBITMQ_IO_THREAD_POOL_SIZE=10 # decrease #threads for server limits

我发现使用指令控制器而不是链接函数的唯一原因是，我实际上是想通过require属性将该控制器注入另一个指令中，以促进指令间通信。

但是请注意，如果某些父指令定义了要在其自己的后链接函数中插值的作用域属性，则它们将不会在后代的后链接中定义，因为它们从叶到根反向运行。如果遇到此问题，则应使用预链接功能在范围上定义此类属性，以便在需要的位置可用。

使用$ attrs来评估带有花括号的属性

3 个答案: