我试图弄清楚如何在我在控制器中的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事件的方法中可用的实际对象数据
答案 0 :(得分: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