각선미와의 싸움JS가 컨트롤러를 두 번 실행
앵귤러 이해합니다.JS는 어떤 코드를 두 번, 때로는 더 많이 실행합니다.$watch이벤트, 지속적으로 모델 상태 확인 등
하지만 내 코드:
function MyController($scope, User, local) {
var $scope.User = local.get(); // Get locally save user data
User.get({ id: $scope.User._id.$oid }, function(user) {
$scope.User = new User(user);
local.save($scope.User);
});
//...
2개의 레코드를 DB에 삽입하여 두 번 실행됩니다.저는 오랫동안 이것에 머리를 부딪치고 있었기 때문에 분명히 아직도 배우고 있습니다!
에서 앱라가탐위치로 이동하도록 했습니다.MyController 예:
$routeProvider.when('/',
{ templateUrl: 'pages/home.html',
controller: MyController });
하지만 이것도 가지고 있었습니다.home.html:
<div data-ng-controller="MyController">
이로 인해 컨트롤러가 두 번 소화되었습니다. 제거하기data-ng-controllerHTML의 속성으로 문제를 해결했습니다.에 에신대,,controller:속성이 라우팅 지시어에서 제거되었을 수 있습니다.
이 문제는 탭 탐색을 사용할 때도 나타납니다.를 들면, 들면를예,app.js다음을 포함할 수 있음:
.state('tab.reports', {
url: '/reports',
views: {
'tab-reports': {
templateUrl: 'templates/tab-reports.html',
controller: 'ReportsCtrl'
}
}
})
해당 보고서 탭 HTML은 다음과 유사합니다.
<ion-view view-title="Reports">
<ion-content ng-controller="ReportsCtrl">
이렇게 하면 컨트롤러가 두 번 실행됩니다.
- AngularJS - ng컨트롤러
$route 서비스를 통해 DOM을 경로 정의에 선언하여 컨트롤러를 DOM에 연결할 수도 있습니다.일반적인 실수는 템플릿 자체에서 ng-controller를 사용하여 컨트롤러를 다시 선언하는 것입니다. 그러면 컨트롤러가 두 번 연결되고 실행됩니다.
를 ngRoute와 ng-viewdirective는 기본적으로 컨트롤러가 해당 돔 요소에 연결됩니다(또는 ui-view를 사용하는 경우 ui-view).따라서 템플릿에 다시 첨부할 필요가 없습니다.
저는 방금 이것을 겪었지만, 문제는 받아들여진 답변과 달랐습니다.저는 이것을 미래의 저를 위해 여기에 두고, 그것을 고치기 위해 제가 겪은 단계들을 포함합니다.
- 중복 컨트롤러 선언 제거
- 경로의 후행 슬래시 확인
- 있는지 확인합니다.
ng-ifs - 한 포장이 합니다.
ng-view전화 (내가 실수로 남겼습니다.ng-view그것은 내 실제를 포장하는 것이었습니다.ng-view이로 인해 컨트롤러에 세 번의 통화가 이루어졌습니다.) - ▁the합▁remove다▁if니▁should▁you▁rails,제야를 제거해야 합니다.
turbolinks의 가네준에서application.js파일입니다. 그걸 발견하기 위해 하루 종일을 허비했습니다.여기서 답을 찾았습니다. - ng-app과 부트스트랩으로 앱을 두 번 초기화합니다.각선미와의 싸움JS가 컨트롤러를 두 번 실행
- 자체 컨트롤러가 정의되어 있고 ng-click 등을 통해 템플릿에서 이 컨트롤러의 콜백을 사용하는 디렉티브의 'link' 기능에서 $compile on all 요소를 사용하는 경우.여기서 답을 찾았습니다.
컨트롤러가 두 번 초기화할 수 있는 경우(각형.js 1.3.1의 경우)를 하나 더 추가합니다.
<div ng-if="loading">Loading...</div>
<div ng-if="!loading">
<div ng-view></div>
</div>
이 경우 ng-view가 시작될 때 $route.current가 이미 설정됩니다.이로 인해 이중 초기화가 발생합니다.
수정하려면 ng-if tong-show/ng-hide만 변경하면 모든 것이 잘 작동합니다.
Angular-ui-router를 Angular 1.3+와 함께 사용할 때 경로 전환 시 Rendering 뷰에 대한 문제가 발생했습니다.이로 인해 컨트롤러도 두 번 실행되었습니다.어떤 제안된 해결책도 저에게 효과가 없었습니다.
그나업트중이 업데이트 중입니다.angular-ui-router부터 00.2.11부터 0.2.13까지입니다.
참고를 위해 추가하고자 합니다.
페이지에서도 실행되는 지시문에서 컨트롤러를 참조하면 컨트롤러 코드가 이중으로 실행될 수도 있습니다.
예.
return {
restrict: 'A',
controller: 'myController',
link: function ($scope) { ....
HTML에 ng-controller="myController"도 있는 경우
나는 이 문제로 인해 내 앱과 모든 종속성을 비트로 찢었습니다(자세한 내용은 여기: Angular).JS 앱을 두 번 시작합니다(일반적인 솔루션 시도).))
그리고 결국 모두 바타랑 크롬 플러그인의 잘못이었습니다.
코드를 변경하기 전에 게시물별로 비활성화하는 것이 누구의 목록에 있는 첫 번째 방법은 다음과 같습니다.
컨트롤러가 의도치 않게 두 번 이상 실행되고 있다는 것을 알고 있다면 파일을 검색하여 문제가 되는 컨트롤러의 이름(예: 모든 파일에서 검색: MyController)을 검색해 보십시오.아마도 다른 html/js 파일에 복사 붙여넣기가 되어 해당 부분/컨트롤러를 개발하거나 사용할 때 변경하는 것을 잊었을 것입니다.출처:내가 이 실수를 했습니다.
저는 간단한 앱(루팅 및 단순한 ng-controller 참조 없음)에서 동일한 문제를 겪었고 컨트롤러의 생성자가 두 번 실행되었습니다.마침내, 나는 내 Angular를 자동 부트스트랩하기 위한 다음 선언이 나의 문제라는 것을 알게 되었습니다.My Razor 보기의 JS 응용 프로그램
<html ng-app="mTest1">
또한 각도를 사용하여 수동으로 부트스트랩을 했습니다.부트스트랩.
angular.bootstrap(document, [this.app.name]);
그래서 그들 중 하나를 제거하는 것이 저에게 효과가 있었습니다.
경우에 따라 다음과 같이 지침 닫기를 수정하지 않을 때 지침이 두 번 실행됩니다.
<my-directive>Some content<my-directive>
이렇게 하면 지시문이 두 번 실행됩니다.또한 지시문이 두 번 실행되는 경우가 종종 있습니다.
당신의 지시를 당신의 것에 포함시키지 않도록 확실히 하라.index.html 트와이스!
AngularJS 1.4rc 빌드에 대한 이 문제에 대해 머리를 긁적거리다가, 이 글을 쓸 당시 Angular 1.4와 Angular 2의 새로운 라우터 라이브러리에서 비롯되었기 때문에 위의 답변 중 어떤 것도 해당되지 않는다는 것을 깨달았습니다.따라서 새 Angular 경로 라이브러리를 사용하는 사용자를 위해 메모를 보냅니다.
에 html이 되어 있는 ng-viewport은 에서 하여 앱의 를 참조하십시오.ng-link연결된 구성 요소의 대상 컨트롤러가 두 번 로드됩니다.미묘한 차이는 브라우저가 이미 대상 컨트롤러를 로드한 경우 동일한 하이퍼링크를 다시 클릭하면 컨트롤러가 한 번만 호출된다는 것입니다.
아직 실행 가능한 해결책을 찾지 못했지만, 이 동작이 shaunxu가 제기한 관찰과 일치한다고 생각하며, 향후 새 경로 라이브러리 구축 및 AngularJS 1.4 릴리스에서 이 문제가 해결되기를 바랍니다.
저의 경우 동일한 컨트롤러를 사용하여 두 개의 보기를 찾았습니다.
$stateProvider.state('app', {
url: '',
views: {
"viewOne@app": {
controller: 'CtrlOne as CtrlOne',
templateUrl: 'main/one.tpl.html'
},
"viewTwo@app": {
controller: 'CtrlOne as CtrlOne',
templateUrl: 'main/two.tpl.html'
}
}
});
제가 직면한 문제는 접선 문제일 수도 있지만, 구글 검색을 통해 이 질문을 받았기 때문에, 이것이 적절할 수도 있습니다.UI 라우터를 사용할 때 문제가 발생하지만 브라우저 새로 고침 버튼으로 페이지를 새로 고칠 때만 문제가 발생합니다.앱은 상위 추상 상태의 UI 라우터를 사용한 다음 하위 상태를 해제합니다.에서 ㅠㅠㅠrun()다함, 가함있습이 .$state.go('...child-state...')지휘권상위 상태는 다음을 사용합니다.resolve처음에는 어린이 컨트롤러가 두 번 실행되는 줄 알았습니다.
URL에 해시가 추가되기 전에 모든 것이 정상입니다.
www.someoldwebaddress.org
Router에서 에는 UI를 사용하여 URL을 변경합니다.
www.someoldwebaddress.org#/childstate
...그리고 브라우저 새로 고침 버튼을 사용하여 페이지를 새로 고치면,$stateChangeStart두 번 발사하고, 각각의 시간은 다음을 가리킵니다.childstate.
그resolve상위 상태는 두 번 발사하는 것입니다.
아마도 이것은 둔탁한 것일 것입니다; 어쨌든, 이것은 저에게 문제를 제거하는 것처럼 보입니다: 코드 영역에서.$stateProvider먼저 호출되고, 먼저 window.location 여부를 확인합니다.해시가 빈 문자열입니다.정상이면 모두 정상이고, 그렇지 않으면 window.location을 설정합니다.빈 문자열로 해시합니다.그렇다면 그것은$state두 번이 아니라 한 번만 어디론가 가려고 합니다.
또한 앱의 기본값에 의존하지 않으려는 경우run그리고.state.go(...)새로 고침 .state.go(...).
ControllerAs 구문을 사용하는 사용자의 경우 다음과 같이 $routeprovider에서 컨트롤러 레이블을 선언합니다.
$routeprovider
.when('/link', {
templateUrl: 'templateUrl',
controller: 'UploadsController as ctrl'
})
또는
$routeprovider
.when('/link', {
templateUrl: 'templateUrl',
controller: 'UploadsController'
controllerAs: 'ctrl'
})
$route 제공자를 선언한 후에는 보기와 같이 컨트롤러를 제공하지 마십시오.대신 뷰의 레이블을 사용합니다.
제 경우에는 제가 사용한 url 패턴 때문이었습니다.
제 URL은 /ui/project/:parameter1/:parameter2와 같습니다.
모든 상태 변화의 경우에 parameter2가 필요하지 않았습니다.두 번째 매개 변수가 필요하지 않은 경우 URL은 /ui/project/:parameter1/과 같습니다.따라서 상태가 변경될 때마다 컨트롤러를 두 번 새로 고칩니다.
해결책은 parameter2를 빈 문자열로 설정하고 상태를 변경하는 것이었습니다.
이 이중 초기화는 다른 이유로 발생했습니다.응용 프로그램의 일부 경로 전환의 경우 페이지 맨 위 근처로 강제로 스크롤하려고 했습니다(예: 페이지화된 검색 결과에서...다음을 클릭하면 2페이지의 맨 위로 이동합니다.).
이작은업수신에수추다행니습했여가하를에 하여 이 작업을 했습니다.$rootScope $on $viewContentLoaded(특정 에 따라) 실행된 것입니다.
$location.hash('top');
실수로 이로 인해 경로가 재평가되고 컨트롤러가 다시 초기화되었습니다.
의 문제는 하는 것이었습니다.$location.search('param', key);
당신은 여기에서 그것에 대해 더 읽을 수 있습니다.
url의 매개 변수 추가로 인해 컨트롤러가 두 번 호출됨
저의 경우 컨트롤러 이름을 다른 이름으로 변경하여 문제를 해결했습니다.
"angular-ui-tree" 모듈과 컨트롤러 이름이 충돌했습니다."Cataloger"에서 컨트롤러 이름을 변경했습니다.TreeController"에서 "TreeController"로 이동한 다음 이 지시어가 "TreeController"라는 컨트롤러를 사용하기 때문에 "ui-tree" 지시어가 사용되는 페이지에서 이 컨트롤러가 두 번 시작됩니다.
저는 같은 문제를 겪었고 모든 답을 시도한 후 마침내 제 견해에 동일한 컨트롤러에 바인딩된 지침이 있다는 것을 알게 되었습니다.
APP.directive('MyDirective', function() {
return {
restrict: 'AE',
scope: {},
templateUrl: '../views/quiz.html',
controller: 'ShowClassController'
}
});
지침을 제거한 후 컨트롤러가 두 번 호출되는 것을 중지했습니다.이제 제 질문은 이 문제 없이 컨트롤러 범위에 바인딩된 이 지침을 어떻게 사용할 수 있을까 하는 것입니다.
저는 방금 제 문제를 풀었는데, 사실 꽤 실망스러웠습니다.이것은 이온 하이브리드 앱입니다, 저는 ui-router v0.2.13을 사용했습니다.제 경우에는 epub 리더(epub.js 사용)가 있습니다. epub 리더는 제가 제 책 라이브러리로 이동하여 다른 책을 선택하면 "문서를 찾을 수 없습니다"라고 계속해서 보고합니다.다시 로드했을 때 브라우저 책이 완벽하게 렌더링되고 있었지만 다른 책을 선택했을 때 동일한 문제가 다시 발생했습니다.
제 해결책은 매우 간단했습니다.는 방금 제습다니했거방금을 제거했습니다.reload:true$state.go("app.reader", { fileName: fn, reload: true });내 안에서LibraryController
도 저도같문있다니습가제에 같은 문제가 .angular-route@1.6.7정규식 경로의 끝에 있는 추가 슬래시 때문입니다.
.when('/goods/publish/:classId/', option)
로.
.when('/goods/publish/:classId', option)
제대로 작동합니다.
여기에 제 사례도 추가합니다.
저는 앵귤러-의-라우터를 사용하고 있었습니다.$state.go('new_state', {foo: "foo@bar"})
인코딩을 추가하면매개 변수의 URI 구성 요소 문제가 사라졌습니다.$state.go('new_state', {foo: encodeURIComponent("foo@bar")}).
무슨 일입니까?매개 변수 값의 "@" 문자는 URL에서 허용되지 않습니다.각의 라우터는 내 컨트롤러를 두 번 만들었습니다: 첫 번째 생성 시 원래의 "foo@bar"를 통과했고, 두 번째 생성 시 인코딩된 버전 "foo%40bar"를 통과했습니다.위와 같이 파라미터를 명시적으로 인코딩하면 문제가 해결되었습니다.
제 문제는 추적하기가 정말 어려웠습니다.결국 웹 페이지에 누락된 이미지가 있을 때 문제가 발생했습니다.src에 URL이 없습니다.이 문제는 MVC 5 웹 컨트롤러에서 발생했습니다.문제를 해결하기 위해 실제 이미지가 없을 때 투명 이미지를 포함했습니다.
<img alt="" class="logo" src="">
제 전화가 두 번 걸려오는 것은 제 html에서 메소드를 두 번 부르고 있었기 때문이라는 것을 알았습니다.
`<form class="form-horizontal" name="x" ng-submit="findX() novalidate >
<input type="text"....>
<input type="text"....>
<input type="text"....>
<button type="submit" class="btn btn-sm btn-primary" ng-click="findX()"
</form>`
강조 표시된 섹션으로 인해 findX()가 두 번 호출되었습니다.누군가에게 도움이 되길 바랍니다.
언급URL : https://stackoverflow.com/questions/15535336/combating-angularjs-executing-controller-twice
'itsource' 카테고리의 다른 글
| 일상적인 사용을 위해 zsh로 전환할 가치가 있습니까? (0) | 2023.05.22 |
|---|---|
| Git 푸시 결과가 "인증 실패"로 표시됨 (0) | 2023.05.22 |
| MongoDB용 GUI 도구 (0) | 2023.05.22 |
| 코드를 사용하여 WPF에서 메뉴 구분 기호 표시줄을 만드는 방법 (0) | 2023.05.22 |
| Reflection을 사용하여 개인 필드를 찾으시겠습니까? (0) | 2023.05.22 |