AngularJS不会更新视图

时间:2014-07-22 14:41:42

标签: angularjs

我是angularJS的新手并且遇到了我的第一个大问题。 首先,我想创建一个列表并对其进行更新,但它不起作用。

// index.html
<form ng-controller="ListCtrl">
    <div class="form-group">
        <input name="listname" ng-model="listname">
        <input type="button" ng-click="set()" value="add new list">
    </div>
</form>
<div ng-controller="ListCtrl">
    <ul>
        <li ng-repeat="list in lists">
            {{list.id}} - {{list.listname}}
        </li>
    </ul>
    {{output}}
</div>

有趣的部分是resetForm(),在那里我重置了表单,但也会尝试更新$ scope.output。但无论我试图改变什么,这种输出都不会改变。

// ListCtrl
var ListApp = angular.module('ListApp', []);

ListApp.controller('ListCtrl', function ($scope) {
// add new records to database
$scope.set = function() {
    $scope.createTableIfNotExists();
    $scope.insertSql = 'INSERT INTO Lists (listname) VALUES (?)';

    if ($scope.listname) {
        $scope.db.transaction(
            function (transaction) {
                transaction.executeSql($scope.insertSql, [$scope.listname], resetForm);
            }
        );
    }
};

function resetForm() {
    // clear the input field
    $scope.listname = "";
    $scope.listForm.$setPristine();
    $scope.output = 'Hello World';
    $scope.$apply();
}

修改 当我尝试使用$ apply时,控制台会显示错误:

function resetForm() {
    $scope.$apply(function () {
        $scope.listname = "";
        $scope.listForm.$setPristine();
        $scope.output = 'Hello World';
    });
}

错误是:

Uncaught TypeError: undefined is not a function 

错误指向&#34; $ scope的开头。$ apply(函数......&#34;

编辑2: 当我在index.html中添加一个新按钮并使用ng-click调用一个函数时,我只想说

$scope.output = 'Hello World!';

然后我的观点更新。 当我使用回调来更改范围时,它只会更新。不明白这一点。我认为一切都是以angularJS连接的,特别是当我在同一个控制器中时。

编辑3: 这是plunker

1 个答案:

答案 0 :(得分:1)

  

未捕获的TypeError:undefined不是函数

那是因为您拨打了$scope.apply而不是$scope.$apply

尝试使用回调函数调用它:

$scope.$apply(function () {
    $scope.listname = "";
    $scope.listForm.$setPristine();
    $scope.output = 'Hello World';
});