제출 후 양식을 변경하는 값에는 각 지시문을 제출하는 오래된 가치

Question

http://jsfiddle.net/p8RNJ/3/

누를 때 나는'제출'버튼을, fooController 컨트롤러와 같'A'도 barController 할당되는 값'A',which is 에서 확인합니다:

bar in controller: A

후에는 내가 누르면"설정 값이"버튼 fooController 입 업데이에서 지시문을 통해 바인딩을 가진 값"B"를 확인에 UI:

foo in controller: B

그러나 이상에'제출'버튼을, fooController 컨트롤러는 여전히 오래 된 가치의'A'도 $scope.barController 다시 한번 얻 의 값이 할당'A':

bar in controller: A

을 어떻게 확신할 수 있습니에 두 번째 제출 fooController 는 올바른 값을'B' barController 된 값이'B'니까?

HTML:

<div ng-app="app" ng-controller="Controller">
<script type="text/ng-template" id="directive-template.html">
    foo in directive: {{fooDirective}}<br/>
    <button ng-click="setValue()">set value</button>
</script>

<form data-ng-submit="getModel()">
    <div ng-controller="Controller">
        <button type="submit">submit</button><br/>
        foo in controller: {{fooController}}<br/>
        bar in controller: {{barController}}<br/>
        <my-customer model="fooController"></my-customer>
    </div>
</form>
</div>

고 JS:

angular.module('app', [])
.controller('Controller', ['$scope', function($scope) {
    $scope.fooController = 'A';
    $scope.getModel = function() {
        $scope.barController = $scope.fooController;
    }
}])

.directive('myCustomer', function() {
    return {
        restrict: 'E',
        scope: {
            fooDirective: '=model'
        },
        controller: function ($scope) {
            $scope.setValue = function() {
                $scope.fooDirective = 'B';
            };
        },
        templateUrl: 'directive-template.html'
    };
});

Answer 1

를 사용하지 않는 기본 데이터 유형(숫자,문자열,부울)기 때문에 상속이 작동하지 않지만 작품에서는 부모$범위를 chid$범위가 있습니다.만약 당신이 원하는 두 가지 방법으로 사용자체 또는 배열을(즉 각 커뮤니티가 실제로 권장).

$scope.barController = "aaaa";

어야 한다:

$scope.modelState.barController = "aaa";

이 방법은 당신이 그것을 변경하는 경우에 아동 범위에서 업데이트됩니다 부모 중 하나뿐만 아니라.

Answer 2

해야 합 감싸는 지시어에서 변경$범위가 있습니다.적용

  $scope.apply(function(){
        $scope.setValue = function() {
            $scope.fooDirective = 'B';
        };
   }