加载视图时运行 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>

the isClean()控制器中定义了函数：

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

正如你所看到的，它使用$scope.isSaving标志，它是在init()功能。

问题：加载视图时，调用 isClean 函数before the init()函数，因此标志isSaving is undefined。我可以做什么来防止这种情况发生？

当您的视图加载时，其关联的控制器也会加载。而不是使用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，这也解决了你的第二个问题。

Fiddle http://jsfiddle.net/mrajcok/wBM64/

As John David Five提到过，您可能不想将其附加到$scope为了使这个方法私有。

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

参见 jsFiddle http://jsfiddle.net/AdrienBe/52yc52m6/

如果您想等待预设某些数据，请将该数据请求移至解析，或将观察器添加到该集合或对象，并在数据满足初始化条件时调用您的 init 方法。一旦满足我的数据要求，我通常会删除观察程序，因此如果您观察的数据发生变化并满足运行 init 方法的标准，则 init 函数不会随机重新运行。

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