Angular editor failed to initialize variables, do you know the reason? Here is a detailed explanation of angularjs initialization failure

This article mainly introduces the reasons for the failure of initializing variables edited by angularjs. I hope it will be helpful to everyone. Let’s take a look at this article.

Initialization of editing, based on the id obtained by clicking on the edit item, obtain this id# from the background ##All the information, and then initialize the corresponding fields to the front page.

Most of the time we don't need to do any special processing, because when we get the object, the initialization work will be done directly for us through the two-way binding of

angularjs. But why did I record it separately this time? There must be something different.

The problem with this editing is mainly during the front-end design. One of the fields is

Precision Unit, but when selecting the unit, you must first select the category of the unit. There is no category field in the entity, so just add a field yourself to achieve the following effect:

First select the previous category drop-down box , and then click the desired unit.

Cause of the problem

Let’s first look at our handling of

category

## Using the underscore

_

means that this variable is defined by ourselves. This means that in the first step we mentioned above, the object obtained based on id does not have this attribute. If we want this category to be displayed on the front desk, we need to define one ourselves and assign a value. This is what the title says Variable. Process

1. When it was first defined, it was directly assigned:

$scope.data._accuracyMeasurementUnitCategory = $scope.data.primaryParameterCategory.accuracyUnitSet[0].measurementUnitCategory;

But this assignment method is not feasible and is not displayed on the interface.

2. I think I encountered a similar problem a while ago. The cause of the problem was that when

angular

was rendering for the first time, $scope.datahas no value yet, so no value is attached. So I put the initialization in the callback function to execute:

It was found that it was still unsuccessful.

3. Then monitor it and find that it is not that there is no value assigned, but that after the value is assigned, it is overwritten by the default option

Please select

, so it always displays like this:

It’s easy to handle when you see this. Just listen to the variable. When it

changes

, and the changed newValue is , please select , then I will initialize and assign it. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$scope.$watch('data._accuracyMeasurementUnitCategory', function(newValue) {     if (newValue &amp;&amp; newValue.name === '请选择') {         $scope.data._accuracyMeasurementUnitCategory = $scope.data.primaryParameterCategory.accuracyUnitSet[0].measurementUnitCategory;     } });</pre><div class="contentsignin">Copy after login</div></div>This time the binding was successful, but it seems that the implementation is not good:

Open the console and you can see the The above error occurred:

$digest reached the maximum number of iterations.

After some searching, I finally found the reason for this

Error

. Because the

category

has been initialized in the instruction, set it to Please select , and then we are in the controller Monitor it and give it a new value when it changes and the value is Please select . And we know that angular
will render multiple times. Each time the instruction is rendered, it is set to once. Please select , and the controller will change when it monitors it. This creates a cycle. At this time, $digest
will traverse the loop and check whether $watch has changed. Then to prevent the infinite loop, $digest sets a maximum limit, so the error in the screenshot above appears. 4. Looking at this large area of ​​red makes me feel very bad. Considering that I just want to implement a simple assignment now, it seems good to use a simpler method. So I considered using

$timeout

to help implement the function. He will wait for a period of time and then tell $digest to render. At this point, the value we want is available. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 初始化主参量的单位 $timeout(function() {     $scope.data._accuracyMeasurementUnitCategory = $scope.data.primaryParameterCategory.accuracyUnitSet[0].measurementUnitCategory; }, 100);</pre><div class="contentsignin">Copy after login</div></div>

At this point, the problem is solved.

Summary

When we try to use more advanced methods to implement our functions, we are likely to hit a wall. At this time, it only means that we have not accumulated enough knowledge, so it is a good idea to change to a simple method. A better choice. If you want to know more about angularjs, go to the PHP Chinese website angularjs Reference Manual column to learn

[Editor’s recommendation]

angularjs expression How to use formula? Examples of using angularjs expressions

#Can you use angularjs filters? Let’s look at the detailed explanation of angularjs filters

The above is the detailed content of Angular editor failed to initialize variables, do you know the reason? Here is a detailed explanation of angularjs initialization failure. For more information, please follow other related articles on the PHP Chinese website!