angularjs의 범위에 바인딩되지 않는 확인란

angularjs의 범위에 바인딩되지 않는 확인란

---

ng-model을 사용하여 범위에 확인란을 바인딩하려고합니다. 체크 박스의 초기 상태는 스코프 모델과 잘 일치하지만 체크 박스를 체크 / 체크 해제하면 모델이 변경되지 않습니다. 주목할 점은 템플릿이 ng-include를 사용하여 런타임에 동적으로로드된다는 것입니다.

app.controller "OrdersController", ($scope, $http, $location, $state, $stateParams, Order) ->

  $scope.billing_is_shipping = false
  $scope.bind_billing_to_shipping = ->
    console.log $scope.billing_is_shipping


<input type="checkbox" ng-model="billing_is_shipping"/>

상자를 선택하면 콘솔은 거짓으로 기록하고, 상자를 선택 취소하면 콘솔은 다시 거짓으로 기록합니다. 또한 범위에 주문 모델이 있으며 확인란의 모델을 order.billing_is_shipping으로 변경하면 정상적으로 작동합니다.

---

나는이 문제로 잠시 고생했습니다. 효과가있는 것은 입력을 기본 요소가 아닌 객체에 바인딩하는 것이 었습니다.

<!-- Partial -->
<input type="checkbox" ng-model="someObject.someProperty"> Check Me!

// Controller
$scope.someObject.someProperty = false

---

를 사용하여 템플릿을로드하는 경우 확인란을 클릭하여 업데이트하려는 경우 상위 범위에 정의 된 모델에 액세스하려면를 ng-include사용해야 $parent합니다 ng-include.

<div ng-app ng-controller="Ctrl">
    <div ng-include src="'template.html'"></div>
</div>

<script type="text/ng-template" id="template.html">
    <input type="checkbox" ng-model="$parent.billing_is_shipping" ng-change="checked()"/>
</script>

function Ctrl($scope) {
    $scope.billing_is_shipping = true;

    $scope.checked = function(){
        console.log($scope.billing_is_shipping);
    }
}

DEMO

---

내 지시문 ( 링크 함수) 에서 다음 과 같이 범위 변수 성공을 만들었습니다 .

link: function(scope, element, attrs) {
            "use strict";

            scope.success = false;

그리고 범위 템플릿에는 다음과 같은 입력 태그가 포함되어 있습니다.

<input type="checkbox" ng-model="success">

이것은 작동하지 않았습니다.

결국 내 범위 변수를 다음과 같이 변경했습니다.

link: function(scope, element, attrs) {
            "use strict";

            scope.outcome = {
                success : false
            };

그리고 내 입력 태그는 다음과 같습니다.

<input type="checkbox" ng-model="outcome.success">

이제 예상대로 작동합니다. 나는 이것에 대한 설명을 알고 있었지만, 누군가가 나를 대신 해줄지도 모른다는 것을 잊었다. :)

---

Matt의 답변을 확장 하면이 문제를 해결하고 다음에 대한 설명을 제공하는이 Egghead.io 비디오를 참조하십시오. 속성을 $ scope에 직접 바인딩하면 문제가 발생할 수있는 이유

see: https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

Usually this is due to another directive in-between your ng-controller and your input that is creating a new scope. When the select writes out it value, it will write it up to the most recent scope, so it would write it to this scope rather than the parent that is further away.

The best practice is to never bind directly to a variable on the scope in an ng-model, this is also known as always including a "dot" in your ngmodel.

참고URL : https://stackoverflow.com/questions/18642371/checkbox-not-binding-to-scope-in-angularjs