Question

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

我正在使用ng-repeat来显示“条款”列表。
我有一个按钮显示一个对话框，该对话框又用于插入新的“期限”。
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();" />

Answer 1

乍一看，我猜测问题是Scope，所以我解决了它，我将一个CSS类附加到包含ng-repeat指令的table元素，这是我的工作代码：

$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();
                });

            });
        }
    });
}

我使用以下方法获得包含ng-repeat的表的范围： -

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

再次设置术语变量： -

termscope.terms = data;

最后我需要调用$ apply来更新视图（html）。

termscope.$apply();

并且它运行良好并在关闭对话框后更新了ng-repeat（视图），没有问题。

Answer 2

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

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

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

使用对话框插入新项目后，ng repeat dosnot不会自动更新

2 个答案: