我正在尝试使用表在Angular.js中执行弹出窗口,其中有一个选项可以单击一行中的特定单元格,从而提供弹出窗口。以下是代码片段。
Html代码
<table class="table table-bordered">
<tr><th>Number</th><th>Comment</th></tr><tr ng-repeat="col in Data|filter:search1"><td>{{col.cd}}</td><td><div ng-controller="igCtrl">
<a href="#" ng-click="addComment(col.cd)">Comment</a>
<ig-comment></ig-comment>
</div></td></tr></table>
控制器
function igCtrl($scope) {
$scope.addComment = function (col) {
$scope.cdn="";
$scope.cdn = col;
console.log("testing"+$scope.cdn);
$scope.check = true;
if ($scope.check) {
$("#comment").modal('show');
};
};}
指令
app.directive('igComment', function () {
return {
restrict: 'E',
replace: true,
template:'<div class="row">
<div class="modal fade" id="comment" aria-hidden = "true" >
<div class = "modal-dialog" style="width:300px;height:600px;">
<form class="form-horizontal" name="form" ng-submit = "submit()" novalidate="novalidate">
<div class = "modal-content" >
<div class = "modal-header">
Data is :{{cdn}}
<input ng-disabled="form.$invalid" type="submit" class="btn btn-primary" id="submit" ng-click="submit()" value="Submit"></input >
<input type="button" class="btn btn-primary" data-dismiss="modal" value="Cancel" ng-click="cancel()"></input>
</div>
</div >
</form>
</div >
</div>
</div>'
};
});
此表的数据来自数据库。控制器中的变量cdn
正在更新,控制器中的console.log
语句会提供正确的输出。
但是指令中的cdn
没有得到更新,因此弹出窗口中没有显示rite结果。
如何纠正这个问题?
由于
答案 0 :(得分:1)
我会使用一个孤立的范围。 e.g:
<ig-comment cdn="cdn"></ig-comment>
*它从控制器的范围
获取“cdn”值并在指令中:
return {
restrict: 'E',
replace: true,
scope: { cdn: '=' } // this assigns the "cdn" from the directive attribute above
// to the directive isolated scope (under the same name)
...
其余的似乎很好(忽略了不幸的jquery混音)并且应该可以工作。