加载视图时运行 AngularJS 初始化代码 [英] Running AngularJS initialization code when view is loaded

问题描述

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

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

废话

在控制器中:

$scope.init = function () {如果($routeParams.Id){//获取现有对象});} 别的 {//创建一个新对象}$scope.isSaving = false;}

第一个问题:这是正确的做法吗?

接下来，我对发生的事件顺序有疑问.在视图中，我有一个保存"按钮，它使用 ng-disabled 指令，如下所示:

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

isClean() 函数在控制器中定义:

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

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

问题:当视图加载时，isClean 函数在之前init() 函数被调用，因此标志isSaving 是<代码>未定义.我能做些什么来防止这种情况发生?

解决方案

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

$scope.init = function () {如果($routeParams.Id){//获取现有对象} 别的 {//创建一个新对象}$scope.isSaving = false;}...$scope.init();

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

小提琴

<小时>

正如 John David Five 所提到的，您可能不想将它附加到 $scope 以使此方法私有.

var init = function () {//做点什么}...在里面();

见 jsFiddle

<小时>

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

var init = function () {//做点什么}...var unwatch = scope.$watch('myCollecitonOrObject', function(newVal, oldVal){if(newVal && newVal.length > 0) {不看()；在里面();}});

When I load a view, I'd like to run some initialization code in its associated controller.

To do so, I've used the ng-init directive on the main element of my view:

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

and in the controller:

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

    $scope.isSaving = false;
}

First question: is this the right way to do it?

Next thing, I have a problem with the sequence of events taking place. In the view I have a 'save' button, which uses the ng-disabled directive as such:

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

the isClean() function is defined in the controller:

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

As you can see, it uses the $scope.isSaving flag, which was initialized in the init() function.

PROBLEM: when the view is loaded, the isClean function is called before the init() function, hence the flag isSaving is undefined. What can I do to prevent that?

解决方案

When your view loads, so does its associated controller. Instead of using ng-init, simply call your init() method in your controller:

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

Since your controller runs before ng-init, this also solves your second issue.

Fiddle

---

As John David Five mentioned, you might not want to attach this to $scope in order to make this method private.

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

See jsFiddle

---

If you want to wait for certain data to be preset, either move that data request to a resolve or add a watcher to that collection or object and call your init method when your data meets your init criteria. I usually remove the watcher once my data requirements are met so the init function doesnt randomly re-run if the data your watching changes and meets your criteria to run your init method.

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

这篇关于加载视图时运行 AngularJS 初始化代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！