Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。

寻∝梦
リリース: 2018-09-07 13:43:37
オリジナル
1822 人が閲覧しました

この記事では、angularjsで編集した変数の初期化に失敗する原因を中心に紹介します。皆さんのお役に立てれば幸いです、一緒にこの記事を見ていきましょう

編集の初期化、編集項目をクリックして取得したidを元に、このidを取得します。 code> をバックグラウンドから取得し、すべての情報を取得し、対応するフィールドをフロント ページに初期化します。 <code>id,从后台获取这个id的所有信息,然后将对应的字段初始化给前台的页面。

大部分的时候我们都不需要做什么特殊处理,因为当我们获取到了对象,通过angularjs的双向绑定就会直接为我们做好初始化的工作。但是为什么这次我单拿出来记录呢?必然是有不同的地方。

这次编辑出现问题的点主要是在前台设计的时候,其中有个字段是精确度单位,但是在选择单位的时候,要先选择单位的类别,而实体中又没有类别这个字段,所有就自己添加个字段,以便达到下面的效果:

Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。

先选中前面的类别下拉框,然后再点选想要的单位。

问题产生原因

先看下我们对类别的处理

Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。

使用下划线_的意思就是这个变量是我们自己定义的。这就意味着,我们上面说的第一步,根据id获取过来的对象并没有这个属相,要是让前台显示出这个类别,就需要我们自己定义一个,并赋值。这也就是标题上所说的变量

过程

1.最开始定义的时候,就是在直接赋值的:

$scope.data._accuracyMeasurementUnitCategory = $scope.data.primaryParameterCategory.accuracyUnitSet[0].measurementUnitCategory;
ログイン後にコピー

但是这种赋值方式并不行,界面上并没有显示出来。

2.联想到前一阵遇到过一个类似的问题,问题的原因就是在angular在进行第一次渲染的时候,$scope.data还没有值,所以没有附上值。所以就将初始化放在回调函数中去执行:

Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。

发现还是没有成功。

3.然后对其进行监听,发现并不是没有赋值,而是赋值之后又被默认选项请选择给覆盖掉了,所以就一直显示出这个样子:

Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。

看到这里就好办了,只要监听一下变量,当他发生改变,并且改变后的newValue请选择,那么我就对其进行初始化赋值。

$scope.$watch('data._accuracyMeasurementUnitCategory', function(newValue) {
    if (newValue && newValue.name === '请选择') {
        $scope.data._accuracyMeasurementUnitCategory = $scope.data.primaryParameterCategory.accuracyUnitSet[0].measurementUnitCategory;
    }
});
ログイン後にコピー

这次成功绑定,但是好像实现的并不好:

Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。

打开控制台,可以看到出现了如上的错误:$digest达到最大迭代次数。

通过一番查找,最后找到了出现这个Error的原因。

因为在指令中已经对类别进行了初始化处理,将其设置为请选择,然后我们又在控制器中对他进行监听,当我们他产生变化并且值为请选择的时候,给他一个新的值。
而我们知道,angular会进行多次渲染,在指令每次渲染的时候,都设置成一次请选择,而控制器监听到又会改变,这就产生了循环。
这时候$digest就会遍历循环,巡查$watch是否发生变化。然后防止无限循环下去,$digest设置了一个最大上限,所以就出现上面截图的报错。

4.看着这一大片的红,让我感觉很是不好。考虑到我现在只是想实现简单的赋值,那使用比较简单的方法好像也不错。所以就考虑使用$timeout来帮助实现功能,他会等一段时间后,告诉$digest

オブジェクトを取得すると、angularjs の双方向バインディングによって直接初期化されるため、ほとんどの場合、特別な処理を行う必要はありません。しかし、なぜ今回は別々に録音したのでしょうか?何か違うはずだ。

この編集に関する問題は主にフロントエンド設計中に発生します。フィールドの 1 つは Precision Unit ですが、ユニットを選択するときは、まずユニットのカテゴリを選択する必要があります。エンティティ カテゴリ フィールドはないため、次の効果を実現するには、自分でフィールドを追加するだけです: Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。

Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。

🎜まず、前面にあるカテゴリのドロップダウン ボックスを選択し、目的のユニットをクリックします。 🎜

問題の原因

🎜 まず、category の処理を​​見てみましょう🎜🎜🎜Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。🎜🎜🎜アンダースコア _ を使用すると、この変数が自分たちで定義されることを意味します。これは、上で説明した最初のステップで、id に基づいて取得されたオブジェクトにはこの属性がないことを意味します。このカテゴリをフロント デスクに表示したい場合は、自分でカテゴリを定義する必要があります。値を割り当てます。これは、タイトルに 変数 と表示されているものです。 🎜

プロセス

🎜1. 最初に定義されたときは、次のように直接割り当てられていました: 🎜
// 初始化主参量的单位
$timeout(function() {
    $scope.data._accuracyMeasurementUnitCategory = $scope.data.primaryParameterCategory.accuracyUnitSet[0].measurementUnitCategory;
}, 100);
ログイン後にコピー
🎜しかし、この割り当て方法は実行不可能であり、インターフェイスには表示されません。 🎜🎜2. しばらく前に同様の問題に遭遇したと思います。問題の原因は、angular が初めてレンダリングされたときに、$scope.data がまだそこには価値がないので、値は付けられません。したがって、コールバック関数に初期化を入れて実行します: 🎜🎜🎜Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。 🎜🎜🎜やはり失敗していることが分かりました。 🎜🎜3. その後、それを監視したところ、値が割り当てられていないのではなく、値が割り当てられた後、デフォルトのオプション Please select によって上書きされ、常に表示されることがわかりました。このように: 🎜🎜🎜🎜🎜🎜ここでの処理は簡単です。変数が 変化するとき、変更された newValue選択してください です。 、その後、初期化代入を実行します。 🎜rrreee🎜今回バインディングは成功しましたが、実装が良くないようです: 🎜🎜🎜Angular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。🎜🎜🎜 コンソールを開くと、上記のエラーが表示されます: $digest が反復の最大数に達しました。 🎜🎜いくつか検索した結果、この エラー の理由がついに見つかりました。 🎜
category は命令内で初期化されているため、それを Please select に設定し、Controller に移動して監視します。変更されたら新しい値を指定します。値は Please select です。
そして、angular が複数回レンダリングされることがわかっています。命令が毎回レンダリングされると、Please select が 1 回に設定され、コントローラーが監視して実行されます。変化することでサイクルが生まれます。
この時点で、$digest はループを走査し、$watch が変更されたかどうかを確認します。次に、無限ループを防ぐために、$digest で上限を設定するため、上のスクリーンショットのエラーが表示されます。
🎜4. この広い範囲の赤いものを見ると、とても気分が悪くなります。今は単純な割り当てを実装したいだけであることを考えると、より単純な方法を使用するのが良さそうです。そこで、関数の実装を支援するために $timeout を使用することを検討しました。この関数は、一定時間待機してから、$digest にレンダリングを指示します。この時点で、必要な値が利用可能になります。 🎜rrreee🎜🎜🎜🎜🎜🎜それで、問題は解決しました。 🎜

まとめ

より高度なメソッドを使用して機能を実装しようとすると、現時点では十分な蓄積がされていないことを意味するだけなので、シンプルなメソッドに変更する方が良い選択です。 angularjs についてさらに詳しく知りたい場合は、PHP 中国語 Web サイト angularjs Reference Manual のコラムにアクセスして学習してください

[編集者の推奨]

angularjs 式の使用方法? angularjs式の使用例

angularjsフィルターは使える? angularjsフィルターの詳しい説明を見てみましょう

以上がAngular エディターが変数の初期化に失敗しました。理由はわかりますか? angularjsの初期化失敗の詳細な説明は次のとおりです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!