1

我只是 angularJs 的初学者，我正在尝试使用 $http 和 asp.net MVC 进行 CRUD 操作：-

  1. 我正在使用 ng-repeat 来显示 "Terms" 列表。

  2. 我有一个按钮来显示一个对话框，该对话框又将用于插入新的“术语”。

  3. ng-repeat 效果很好，对话框也显示了，我可以成功插入新项目。

问题是：--插入新术语并关闭对话框后，ng-repeat 不会更新。这是我正在使用的代码：

var glossayApp = angular.module("glossaryApp", ['ui.bootstrap.dialog']);

var ctrl = glossayApp.controller("termController", function ($scope, $http, $route, $dialog, $window) {
$scope.terms = [];

$scope.init = function () {
    $http.get("/Home/List").success(function (data) {
        $scope.terms = data;
    });
}
$scope.add = function () {
    $scope.opts = { backdrop: true, keyboard: true, backdropClick: true, templateUrl: '/Home/Add', controller: 'dialogController' };
    var d = $dialog.dialog($scope.opts);
    d.open().then(function (term) {
        if (term) {
            $http.post('/Home/Add/', { Name: term.name, Definition: term.definition }).success(function () {
                $scope.init();
            });
        }
    });
}
});
glossayApp.config(function ($routeProvider) {
$routeProvider.when('/', {
    controller: 'termController', templateUrl: '/Home/list'
}).when('/Details:id', {
    controller: 'termController', templateUrl: '/Home/details'
}).otherwise({
    redirectTo: '/'
});
});


var dialogController = glossayApp.controller('dialogController', function ($scope, dialog) {
$scope.save = function (term) {
    dialog.close(term);
}
$scope.close = function () {
    dialog.close();
}
});

这是我在 ngrepeat 中使用的 HTML：-

<table border="0" cellpadding="0" cellspacing="0" ng-init="init();">
<thead>
    <tr>
        <td>
            Term
        </td>
        <td>
            Definition
        </td>
    </tr>
</thead>
<tr ng-repeat="term in terms">
    <td>
        {{term.Name}}
    </td>
    <td>
        {{term.Definition}}
    </td>
</tr>
</table>
<br />
<input type="button" name="Add" value="Add New Term" ng-click="add();" />
4

2 回答 2

2

at the first glance , I guessed that the problem is the Scope , so I worked around it , I attached a CSS class to the table element which contains ng-repeat directive , this is my working code :

$scope.add = function () {
    $scope.opts = { backdrop: true, keyboard: true, backdropClick: true, templateUrl: '/Home/Add', controller: 'dialogController' };
    var d = $dialog.dialog($scope.opts);
    d.open().then(function (term) {
        if (term) {
            $http.post('/Home/Add/', { Name: term.name, Definition: term.definition }).success(function () {
                $http.get("/Home/GetData").success(function (data) {
                    var termscope = angular.element($(".term")).scope();
                    termscope.terms = data;
                    termscope.$apply();
                });

            });
        }
    });
}

I get the scope of the table which contains ng-repeat using :-

 var termscope = angular.element($(".term")).scope();

and set terms variable again :-

termscope.terms = data;

and at the end i need to call $apply to update view(html).

termscope.$apply();

and it works well and updated the ng-repeat (view) after closing the dialog with no problem .

于 2013-06-17T17:57:27.937 回答
-1

问题是使用 Modal 而不是 dialog 来解决，并且效果很好。

对话框：- http://angular-ui.github.io/bootstrap/#/dialog

模态：- http://angular-ui.github.io/bootstrap/#/modal

于 2013-06-17T01:09:37.707 回答