각도 변경 방법JS 데이터가 범위를 벗어났습니까?

각도 변경 방법JS 데이터가 범위를 벗어났습니까?

몇 시간 동안 검색한 결과 질문을 여기에 제출해야 할 것 같습니다.이전에 이 질문에 답한 적이 있다면 미리 사과드립니다만, 지금까지의 검색은 도움이 되지 않았습니다.제 질문은 다음과 같습니다.

내 JavaScript 코드는 객체를 만들고 있으며, 이는 AngularJS에 의해 수정되고 모니터링됩니다.일부 이벤트(오브젝트의 이전 설정을 로드하는 경우 등)에서는 이 오브젝트의 속성을 범위 밖에서 변경하고 싶습니다.문제는 입력이 변경되지 않는다는 것입니다.

다음은 이러한 변경을 수행하는 방법의 예입니다.

---

HTML 코드:

<div ng-app="myApp" ng-controller="FirstCtrl">
<input type="number" ng-model="data.age">
<h1>{{data.age}}</h1>

<input type="button" value="Change to 20" ng-model="data" onclick="change()">

---

JavaScript 코드:

var person = {
    age: 16
};

// Create module
var myApp = angular.module('myApp', []);
myApp.factory('Data', function() {
    return person;
});

function FirstCtrl($scope, Data) {
    $scope.data = Data;
}

function change() {
    person.age = 20;
}

---

"20으로 변경" 버튼을 눌러도 아무 일도 일어나지 않습니다.연령을 수정하려면 어떻게 해야 하나요?change기능하고 있습니까?

⚠경고:이 답변은 오래된 것으로 모범 사례를 반영하지 않으며 Angular의 최신 버전과 호환되지 않을 수 있습니다.

Max PRafferty의 답변은 정확합니다.스코프에서 함수를 사용하는 것이 이 작업을 수행하는 더 좋은 방법인 경우가 많습니다.그러나 다른 옵션이 있습니다.를 사용할 수 있습니다.angular.element(...).scope()메서드를 사용하여 관련 없는 JavaScript에서 Angular 스코프에 액세스합니다.앱의 최상위 범위를 선택합니다.ng-app클릭 핸들러에 다음과 같은 속성이 지정되어 있습니다.

function change() {
    var appElement = document.querySelector('[ng-app=myApp]');
    var $scope = angular.element(appElement).scope();
    $scope.$apply(function() {
        $scope.data.age = 20;
    });
}

이 바이올린을 사용해 보세요.

Shaun은 Angular가 "시계" 또는 "바인딩"을 처리하는 동안만 "시계" 또는 "바인딩"을 처리할 것이라고 지적했습니다.$digest()호출합니다. 만약 당신이 그 속성을 수정한다면$scope변경 내용이 즉시 반영되지 않고 버그가 발생할 수 있습니다.

이것을 트리거 하려면 , 다음의 콜을 실시합니다.$scope.$apply()더러운 스코프가 없는지 확인하고 올바르게 바인드된 모든 것을 업데이트합니다.내부 작업을 수행하는 함수 전달$scope.$applyAngular는 예외도 포착할 수 있습니다.이 동작에 대해서는, 스코프의 메뉴얼에 설명되어 있습니다.

Jeremy의 답변은 매우 훌륭하지만, 현재 Angular는 변경되어 다음 코드를 추가하지 않으면 더 이상 작동하지 않습니다.

$scope = $scope.$$childHead;

따라서 변경된 함수는 다음과 같아야 합니다.

function change() {
    var appElement = document.querySelector('[ng-app=myApp]');
    var $scope = angular.element(appElement).scope();
    $scope = $scope.$$childHead; // add this and it will work
    $scope.$apply(function() {
        $scope.data.age = 20;
    });
}

http://jsfiddle.net/MaxPRafferty/GS6Qk/

다음과 같이 ng-click 속성을 스코프 내의 함수로 설정합니다.

var person = {
    age: 16
};

// Create module
var myApp = angular.module('myApp', []);
myApp.factory('Data', function() {
    return person;
});

function FirstCtrl($scope, Data) {
    $scope.data = Data;
    $scope.update = function(){
        $scope.data.age = 20;
    }
}

Jeremy Banks의 완벽한 답변을 한 줄에 담아 설명하겠습니다.단, 컨트롤러와 앱을 언급하고 있습니다.

angular.element('[ng-controller=myController]').scope().$apply(function(x){ x.foo = "bar"; });

간단한 $타임아웃 사용

var whatever = 'xyz';
$timeout(function(){
    $scope.yourModel.yourValue = whatever;
}, 0);

그럼 끝이야

예전에 세계 각지에서 온 $적용 해킹을 다 해봤지만 모두 효과가 없었습니다.그러나 이 $timeout은 항상 charme처럼 작동하며 모든 경우에 작동합니다.$scope와 $timeout에 대한 참조만 있으면 됩니다.

WY 및 작동 방식:

// Imagine an angular buildin-function
angular.$queue = function(fn){
    $timeout(fn, 0);
}

기본적으로 큐처럼 작동합니다.다만, 비동기인 것에 주의해 주세요.

$render 메서드를 사용하면 ng-model 디렉티브에 의해 값이 변경되었을 때 디렉티브에서 호출됩니다.$viewValue 속성을 읽어 새 값을 가져옵니다.보기: https://jsfiddle.net/cesar_ade/g5ybs6ne/

ctrl.$render=function(){
    setSelected(ctrl.$viewValue || 'Not Sure');
}

언급URL : https://stackoverflow.com/questions/17656244/how-to-change-angularjs-data-outside-the-scope