Javascript 使用AngularJS和jquery.dataTables。更改不会得到更新

问题是

实际上，我试图让AngularJS使用jquery.dataTables。这个dataTables看起来非常好而且功能强大。我发现了一些关于如何使angularJS工作的有趣的事情，并用主要思想构建了一个JSFIDLE

我有一个表，使用dataTables动态构建，它来自一个全局$scope变量。这很好用。在这个表中，我有一个具有3个跨度的列：查看、编辑和删除。它们都将当前单击的行设置为全局范围$scope.currentRow变量。此表来自具有隔离作用域和控制器（+link）的指令

在表下我有两个div，一个用于显示currentRow数据，另一个用于编辑（并通过单击调用范围函数的按钮进行确认）。它们来自两个独立的指令，没有单独的作用域

app.directive('currentRowViewer',function(){
    return {
        restrict : 'E',
        template : '<div> VIEW CURRENT DATA : </div><div> ID : {{currentRow.id}} </div><div> DATA A : {{currentRow.dataa}} </div><div> DATA B : {{currentRow.datab}} </div><br/><br/>'
    };
});

app.directive('currentRowEditor',function(){
    return {
        restrict : 'E',
        template : '<div> EDIT CURRENT DATA : </div><div> ID : {{currentRow.id}} </div><div> DATA A : <input type="text" ng-model="currentRow.dataa" name="dataaEditor"/> </div><div> DATA B : <input type="text" ng-model="currentRow.datab" name="databEditor"/> </div><div> <button type="button" ng-click="confirmEdit(currentRow.index)">CONFIRM</button></div><br/><br/>'
    };
});

app.directive（'currentRowViewer'，function（）{
返回{
限制：'E'，
模板：'查看当前数据：ID:{currentRow.ID}}数据A:{{currentRow.dataa}}数据B:{{currentRow.datab}

};
});
app.directive（'currentRowEditor'，function（）{
返回{
限制：'E'，
模板：“编辑当前数据：ID:{{currentRow.ID}}数据A:数据B:确认

”
};
});

请注意，这两条指令使用了全局范围变量，如currentRow.index。。。“显示”当前选定的数据。（他们应该这样做）

当我单击任何一个跨度时，就会发生更改，并且设置currentRow数据。但这并不像它应该做的那样，因为新数据不会出现在表下的指令中！只有当我点击其他东西时，它才起作用，比如我在整个东西下面添加的“奇怪的更新东西”按钮：这个按钮应该只是控制台记录一个字符串，但点击它会触发视图中的更改！哦

相反的工作方式（/失败）相同：

当我在表下的edit div中有数据要编辑时。如果我确认编辑，则会编辑新数据并转到用于生成dataTable的表。此时，$watchCollection应该触发，因为它监视的项发生了更改。。。但事实并非如此，数据表也不会被重新创建

这个问题可能来自于对angularJs指令的误解，或者我的例子中的逻辑问题，但是我有点迷茫

这是我实际使用的小提琴：

---

感谢阅读/帮助

AngularJS不知道您的“正常”点击事件，因此您必须手动要求它更新模型（

$scope.$apply（）

）。如果改用

ng单击
，则不需要此选项。
尝试使用
$scope.$apply（）数据应该更新但不更新的位置。例如，在
中单击
事件。（或者将
的事件更改为
ng，改为单击
）。感谢@Arg0n的评论。下面这段代码按预期工作：但我仍然不明白为什么我必须使用$apply来查看更改，因为这些指令与范围（例如ng模型）直接相关。另一件奇怪的事情是，如果我使用$watchCollection，表中的编辑不会得到更新。我不得不把它改成$watch+trueparam。（oO）这个angularJS/dataTables在我看来非常混乱
app.directive('currentRowViewer',function(){
    return {
        restrict : 'E',
        template : '<div> VIEW CURRENT DATA : </div><div> ID : {{currentRow.id}} </div><div> DATA A : {{currentRow.dataa}} </div><div> DATA B : {{currentRow.datab}} </div><br/><br/>'
    };
});

app.directive('currentRowEditor',function(){
    return {
        restrict : 'E',
        template : '<div> EDIT CURRENT DATA : </div><div> ID : {{currentRow.id}} </div><div> DATA A : <input type="text" ng-model="currentRow.dataa" name="dataaEditor"/> </div><div> DATA B : <input type="text" ng-model="currentRow.datab" name="databEditor"/> </div><div> <button type="button" ng-click="confirmEdit(currentRow.index)">CONFIRM</button></div><br/><br/>'
    };
});