Question

我试图弄清楚如何在我在控制器中的click事件中添加到dom的指令中包含范围。

步骤1.在点击事件中，我调用我的控制器中的一个函数，它添加了一个像这样的指令

$scope.addMyDirective = function(e, instanceOfAnObjectPassedInClickEvent){
   $(e.currentTarget).append($compile("<my-directive mydata='instanceOfAnObjectPassedInClickEvent'/>")($scope));

}
   //I'm trying to take the `instanceOfAnObjectPassedInClickEvent` and make it available in the directive through `mydata`

上面，我得到from this SO answer的一部分，成功地添加了指令（并且该指令有一个添加到dom的模板），但是，在指令中，我不能访问任何范围数据mydata，它表示undefined。

我的指示

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

    return {
       restrict: 'AE',
       scope: {
         mydata: '='
         //also doesn't work if I do mydata: '@'
       },
       template: '<div class="blah">yippee</div>',
       link: function(scope,elem,attrs) {
              console.log(scope) //inspecting scope shows that mydata is undefined
         }
    }
}

更新我在OP中更改了datafromclickedscope的名称以使其更清晰。在控制器动作addMyDirective中（见上文）instanceOfAnObjectPassedInClickEvent是在我尝试以mydata='instanceOfAnObjectPassedInClickEvent'方式传递给指令的点击事件中传递给控制器方法的对象的实例。但是，即使我在指令中将=更改为@并尝试在指令的link函数中访问scope.mydata，它只显示一个类似于此"instanceOfAnObjectPassedInClickEvent"的字符串，而不是在我处理click事件的方法中可用的实际对象数据

Answer 1

在模板中使用mydata='instanceOfAnObjectPassedInClickEvent'时，需要在$ scope中定义instanceOfAnObjectPassedInClickEvent。所以在编译之前你应该在$ scope中分配一个变量。我将在下面的代码中重命名此变量，以便相同的名称不会让您感到困惑，并且很明显函数的形式参数在模板中不可见。

$scope.addMyDirective = function(e, instanceOfAnObjectPassedInClickEvent){
   $scope.myEvent = instanceOfAnObjectPassedInClickEvent;
   $(e.currentTarget).append($compile("<my-directive mydata='myEvent'/>")($scope));
}

编辑：稍微调整jsfiddle 不使用JQuery 不操纵DOM

如何在动态添加的指令中包含控制器的数据/范围？

1 个答案: