javascript - 如何将多个值传递给 Angularjs 指令？

Question

我正在通过指令创建一段可重用的 html。 html 会有一些我想从原始范围传递的变量。这很容易通过在指令上声明属性，然后创建一个隔离范围并捕获它们来轻松完成。问题是，对于更多变量，是否有更好的方法来做到这一点？我曾想过传入一个像 {firstAttr: $scope.one, secondAttr: $scope.two...} 这样的对象，然后把这个对象分开来得到每一部分。这第一次有效，但双向数据绑定(bind)不起作用(即使使用“=”)。

问题是绑定(bind)的是对象，而不是对象的每个单独部分。我可以使用指令中的编译函数将每个属性添加到元素或其他东西吗？所以:

<mydirective databinding="{one:'first one', two:'second one'}">

将被翻译成:

<mydirective one="first one" two="second one">

这样我的数据绑定(bind)将通过捕获指令中的属性按预期工作。我将如何着手完成该设计，或者是否有另一种方法可以完全做到这一点？

Answer 1

数据绑定(bind)指令的想法很有趣，但我不会这样做，因为我相信您会遇到指令优先级问题，而且它非常不标准，并且会使您的代码难以遵循 future 的程序员。有多种方法可以做到这一点，所以我将讨论我使用过的 3 种不同的解决方案。

解决方案一

如果您只需要一种方式的数据绑定(bind)，最简单的解决方案是在使用 {{}} 插入任何简单范围变量后，对指令内对象的字符串表示使用 angular 的 scope.$eval 函数。字符串表示甚至不必是有效的 JSON，因为您会在下面的示例中注意到我没有在对象键周围包含引号。

在 View 中:

<div databinding="{one:'first', two:{{scopeVar}}, complex:[1,2, "Hi"]}"></div>

在 javascript 中:

app.directive('databinding', function () {
   return{
      link: function (scope, elm, attrs) {

        console.debug(scope.$eval(attrs['databinding']));

      }
   }
});

方案二

另一种单向数据绑定(bind)解决方案是在 Controller 内部创建一个选项对象并使用“@”(甚至“=”)将其传递给指令:

在 Controller 中:

$scope.options = {one: "first, two: "second"};

在 View 中:

<div databinding="options"></div>

在 javascript 中:

app.directive('databinding', function () {
   return{
      scope: {

        options: "@" //Can also use = here

      },
      link: function (scope, elm, attrs) {

        console.log(scope.options);

      }
   }
});

方案三

如果您确实需要双向数据绑定(bind)，那您多半是运气不好，因为没有优雅的方法来实现。但是，如果您在市场上寻求 hackish 解决方案，则可以使用与解决方案 2 非常相似但对选项对象进行更改的方法来完成两种方式的数据绑定(bind)。

与其声明包含字符串等简单原始数据类型的选项对象，不如在选项对象内创建一个虚拟对象，然后在其中声明变量。这样做， Controller 中范围变量的更改也将在指令内部实现，如超时所示。

Controller :

$scope.someScopeVar = "Declared in controller"    

$scope.options = {
  dummy: {
     one: $scope.someScopeVar,
     two: "second"
  }
}

window.setTimeout(function(){

  $scope.someScopeVar = "Changed in controller";

}, 2000)

查看:

<div databinding="options"></div>

指令:

app.directive('databinding', function () {
   return{
      scope: {
        options: "=" //You need to use = with this solution
      },
      link: function (scope, elm, attrs) {

        console.log(scope.options.dummy.one); //Outputs "Declared in controller"

        window.setTimeout(function(){

           console.log(scope.options.dummy.one) //Outputs "Changed in controller"

        }, 5000)

      }
   }
});

此方法有效，因为 javascript 通过引用传递对象，而原语是复制的。通过将一个对象嵌套在一个对象中，可以保留数据绑定(bind)。