Angular.JS:Angular for Popups中没有更新数据

时间:2014-10-17 06:45:58

标签: javascript html angularjs angular-ngmodel

我正在尝试使用表在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结果。

如何纠正这个问题?

由于

1 个答案:

答案 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混音)并且应该可以工作。