加载视图时运行AngularJS初始化代码

小编典典

加载视图时运行AngularJS初始化代码

angularjs

加载视图时，我想在其关联的控制器中运行一些初始化代码。

为此，我在视图的主要元素上使用了ng-init指令：

<div ng-init="init()">
  blah
</div>

并在控制器中：

$scope.init = function () {
    if ($routeParams.Id) {
        //get an existing object
        });
    } else {
       //create a new object
    }

    $scope.isSaving = false;
}

第一个问题：这是正确的方法吗？

接下来，事件顺序发生了问题。在视图中，我有一个“保存”按钮，它使用如下ng-disabled指令：

<button ng-click="save()" ng-disabled="isClean()">Save</button>

该isClean()功能在控制器中定义：

$scope.isClean = function () {
    return $scope.hasChanges() && !$scope.isSaving;
}

如您所见，它使用$scope.isSaving在init()函数中初始化的标志。

问题：该视图被加载的情况下，isClean函数被调用之前的init()功能，因此，该标志isSaving是undefined。我该怎么做才能防止这种情况？

阅读 319

2020-07-04

共1个答案

小编典典

加载视图时，其关联的控制器也会加载。无需使用ng-init，只需init()在控制器中调用您的方法即可：

$scope.init = function () {
    if ($routeParams.Id) {
        //get an existing object
    } else {
        //create a new object
    }
    $scope.isSaving = false;
}
...
$scope.init();

由于您的控制器之前运行ng-init，这也解决了您的第二个问题。

jsfiddle

正如John David Five所提到的，你可能不希望这种重视$scope，为了使这个方法私有。

var init = function () {
    // do something
}
...
init();

jsFiddle

如果要等待预先设置某些数据，则将该数据请求移至解决方案，或将监视程序添加到该集合或对象，并在数据满足初始化条件时调用init方法。通常，一旦满足我的数据要求，我就会删除观察者，因此，如果您观察的数据发生更改并且符合运行init方法的条件，则init函数不会随机重新运行。

var init = function () {
    // do something
}
...
var unwatch = scope.$watch('myCollecitonOrObject', function(newVal, oldVal){
                    if( newVal && newVal.length > 0) {
                        unwatch();
                        init();
                    }
                });

2020-07-04