>  기사  >  웹 프론트엔드  >  Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.

Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.

寻∝梦
寻∝梦원래의
2018-09-07 13:43:371852검색

이 글에서는 angularjs로 편집한 변수 초기화 실패 이유를 주로 소개합니다. 모두에게 도움이 되길 바라며, 이 글을 함께 읽어보시죠

편집 초기화, 편집 항목을 클릭하여 얻은 id에 따라 백그라운드에서 이 id를 얻어옵니다. 모든 정보를 입력한 다음 해당 필드를 첫 페이지로 초기화합니다. id,从后台获取这个id的所有信息,然后将对应的字段初始化给前台的页面。

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

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

Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.

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

问题产生原因

先看下我们对类别的处理

Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.

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

过程

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

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

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

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

Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.

发现还是没有成功。

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

Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.

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

$scope.$watch('data._accuracyMeasurementUnitCategory', function(newValue) {
    if (newValue && newValue.name === '请选择') {
        $scope.data._accuracyMeasurementUnitCategory = $scope.data.primaryParameterCategory.accuracyUnitSet[0].measurementUnitCategory;
    }
});

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

Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.

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

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

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

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

대부분의 경우 특별한 처리가 필요하지 않습니다. 객체를 얻을 때 angularjs의 양방향 바인딩이 객체를 직접 초기화하기 때문입니다. 그런데 이번에는 왜 따로 녹음한 걸까요? 뭔가 다른 것이 있어야합니다.

이 편집의 문제점은 주로 프런트 엔드 디자인 중에 발생합니다. 필드 중 하나가 정밀 단위인데, 단위를 선택할 때 먼저 단위의 카테고리를 선택해야 하며, 엔터티 카테고리 필드가 없으므로 필드를 직접 추가하면 다음 효과를 얻을 수 있습니다. Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.

Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.

🎜먼저 앞에 있는 카테고리 드롭다운 박스를 선택한 후 원하는 단위를 클릭하세요. 🎜

문제 원인

🎜먼저 카테고리 처리를 살펴보겠습니다🎜🎜🎜Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.🎜🎜🎜밑줄 _을 사용한다는 것은 이 변수가 직접 정의되었음을 의미합니다. 이는 위에서 언급한 첫 번째 단계에서 id를 기반으로 얻은 객체에 이 속성이 없다는 것을 의미합니다. 이 카테고리를 프런트 데스크에 표시하려면 직접 정의해야 합니다. 값을 할당합니다. 제목에 변수라고 적혀 있습니다. 🎜

Process

🎜1. 처음 정의되었을 때 직접 할당되었습니다: 🎜
// 初始化主参量的单位
$timeout(function() {
    $scope.data._accuracyMeasurementUnitCategory = $scope.data.primaryParameterCategory.accuracyUnitSet[0].measurementUnitCategory;
}, 100);
🎜그러나 이 할당 방법은 불가능하며 인터페이스에 표시되지 않습니다. 🎜🎜2. 얼마 전에 비슷한 문제가 발생한 것 같습니다. angular가 처음 렌더링될 때 $scope.data가 발생했기 때문입니다. 여전히 거기에 가치가 없으므로 가치가 부여되지 않습니다. 따라서 실행할 콜백 함수에 초기화를 넣으세요: 🎜🎜🎜Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다. 🎜🎜🎜아직도 실패한 것으로 확인되었습니다. 🎜🎜3. 그러다가 모니터링 해본 결과 할당된 값이 없는 것이 아니라, 값을 할당한 후 기본 옵션인 선택해주세요에 의해 덮어쓰기가 되어 항상 표시되는 것을 확인했습니다. 🎜🎜🎜🎜🎜🎜여기서 처리하기 쉽습니다. 변수를 변경하면 변경된 newValue선택됩니다. , 그러면 초기화 할당을 수행합니다. 🎜rrreee🎜이번에는 바인딩은 성공했는데 구현이 좋지 않은 것 같습니다: 🎜🎜🎜Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.🎜🎜🎜콘솔을 열면 위의 오류를 볼 수 있습니다: $digest가 최대 반복 횟수에 도달했습니다. 🎜🎜몇번의 검색 끝에 마침내 이 오류의 원인을 찾았습니다. 🎜
명령어에서 범주가 초기화되어 있으므로 선택하세요로 설정한 후 Controller로 이동하여 모니터링합니다. 변경되면 새 값을 지정하고 값은 선택하세요입니다.
그리고 우리는 angular가 여러 번 렌더링된다는 것을 알고 있습니다. 명령이 매번 렌더링될 때 Please select로 설정되고 컨트롤러가 모니터링하고 실행합니다. 변화는 순환을 만들어낸다.
이때 $digest는 루프를 순회하여 $watch가 변경되었는지 확인합니다. 그러면 무한 루프를 방지하기 위해 $digest에서 최대 상한값을 설정하므로 위 스크린샷과 같은 오류가 나타납니다.
🎜4. 이 넓은 빨간색 영역을 보면 기분이 매우 나빠집니다. 지금은 간단한 할당만 구현하고 싶다는 점을 고려하면 더 간단한 방법을 사용하는 것이 좋을 것 같습니다. 그래서 함수 구현을 돕기 위해 $timeout를 사용하는 것을 고려했습니다. 이 함수는 일정 시간 동안 기다린 다음 $digest에 렌더링하도록 지시합니다. 이 시점에서 우리가 원하는 값을 사용할 수 있습니다. 🎜rrreee🎜🎜🎜🎜🎜🎜그렇습니다. 문제가 해결되었습니다. 🎜

요약

기능을 구현하기 위해 좀 더 발전된 방법을 사용하려고 하면 벽에 부딪힐 가능성이 높습니다. 이때는 충분히 축적되지 않았다는 의미일 뿐이므로 간단한 방법으로 바꾸는 것이 더 나은 선택입니다. Angularjs에 대해 더 알고 싶다면 PHP 중국어 웹사이트 angularjs 참조 매뉴얼 칼럼에서

[편집자 추천]

Angularjs 표현식을 사용하는 방법을 알아보세요. Anglejs 표현식의 사용 예

Angularjs 필터를 사용할 수 있나요? Anglejs 필터에 대한 자세한 설명을 살펴보겠습니다

위 내용은 Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.