확인란이 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"/>

콘솔 로그가 false인 경우 체크박스를 끄면 콘솔이 다시 false 체크박스를 끄면 콘솔은 다시 false를 기록합니다.스코프에 주문 모델도 있는데 체크박스의 모델을 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에 직접 속성을 바인딩하는 이유는 무엇입니까?

참조: https://groups.google.com/forum/ #!topic/angular/7번째_me5YrHU

보통 이것은 ng 컨트롤러와 입력 사이에 새로운 스코프가 작성되고 있는 다른 디렉티브에 의한 것입니다.select는 값을 쓸 때 최신 범위까지 값을 쓸 수 있으므로 멀리 있는 부모가 아닌 이 범위에 값을 쓸 수 있습니다.

베스트 프랙티스에서는 스코프상의 변수에 직접 바인드하지 않는 것이 좋습니다.ng-modelngmodel에는 항상 점(dot)이 포함되어 있습니다.

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