Question

我想通过Object中的属性将$scope.data传递给指令，我可以使用任何解决方案实现以下格式，但不能通过分隔属性实现吗？

<custom-directive detail="{index:1, data: {{data}}}">
</custom-directive>

范围在指令

中设置如下

scope: {detail: "="}

Answer 1

一种解决方案可能是

return {
      restrict: 'E',
      require: 'ngModel',
      scope: {
        model: '=ngModel',
      },
      link: function(scope, element, attributes, ngModel) {
           if (!ngModel) {
              return;
           }

           console.log(scope.model); // your passed data
      }
}

然后

<custom-directive ngModel="data"></custom-directive>

现在，您将$scope.data传递给scope.model内的指令。但请注意，指令scope.model中的任何更改都会反映在$scope.data中。

为避免这种情况，您可以简单地更改ngModel。

return {
          restrict: 'E',
          scope: {
            data: '=myData',
          },
          link: function(scope, element, attributes) {

               console.log(scope.data); // your passed data
          }
    }

然后

<custom-directive my-data="data"></custom-directive>

Answer 2

您仍然可以在控制器中创建对象的解决方案：

$scope.detail = {index:1, data:$scope.data};

并将其交给你的指令：

<custom-directive detail="detail"></custom-directive>

Answer 3

您只需在对象中写入数据，它将自动从您的控制器中解析。请按以下步骤操作：

<强> HTML

<custom-directive detail="{index:1, data: data}">
</custom-directive>

<强>指令

myApp.directive('customDirective', function() {
   return {
       restrict:"AE",
    scope:{
        detail:"="
    },
    link:function(scope,ele,attrs) {
        alert(JSON.stringify(scope.detail));
    }
   }
});

Fiddle Demo

通过属性和包含变量将Object传递给指令

3 个答案: