在加载视图时运行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()函数中初始化。

PROBLEM:当视图被加载时,isClean函数在init()函数之前被调用,因此flag isSaving是未定义的。我能做些什么来防止这种情况?

当您的视图加载时,其关联的控制器也是如此。而不是使用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

正如John David五提到的,您可能不想将此附加到$ scope,以使此方法为私有。

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

See jsFiddle

猜你在找的Angularjs相关文章