Clearing $ scope directives on $ destroy

Question

On my switches, I have a directive that binds to the event changeand sets the value ngModeldefined in the element using the value of the switches. It works great.

However, the switches can be hidden removed from the DOM based on the user's choice, and I want to clear these variables in my controller when this happens. I have an event handler $destroyin which I set the values ngModelfor ngModelto undefined.

For some reason, setting the scope value to $destroydoes not change in my controller, and setting it in the handler changeis performed.

HTML

<div ng-repeat="item in category.items" class="field">
    <div class="ui radio checkbox">
        <input type="radio" value="{{item}}" sm-radio-button ng-model="submissions[category.model]" name="{{category.name}}" checked="" tabindex="0" class="hidden">
        <label ng-bind="item"></label>
    </div>
</div>

Directive

.directive('smRadioButton', function(){
    return {
        scope: {
            ngModel: '='
        },
        link: function(scope, element, attrs){

            //Instantiate checkbox on load and set value to undefined
            element.parent().checkbox();
            scope.ngModel = undefined;


            element.on('$destroy', function(){
              scope.ngModel = undefined;
            })            

            element.on('change', function(e){
                scope.$apply(function(){
                    scope.ngModel = attrs.value;
                });
            });
        }
    };
})

category - , :

  {
    name: 'Type',
    model: 'type',
    alwaysShow: true,
    items: ['Spending','Bills','Account Transfer','Deposit']
  }, 

: scope.$apply $destroy, . $destroy .

. , , $destroy , ? scope.$parent, . ( , ng- , $parent s)

Answer 1

NgModelController.

NgModelController :

NgModelController API ngModel. , , CSS . , DOM DOM. , DOM, , NgModelController . Angular DOM . , ngModelController .

$setViewValue, , , - API $render :

.directive('smRadioButton', function(){
    return {
        scope: {
            ngModel: '='
        },
        link: function(scope, element, attrs, ctrl){

            //Instantiate checkbox on load and set value to undefined
            element.parent().checkbox();

            // set the view value
            ctrl.$setViewValue(undefined);

            // render the changes
            ngModel.$render();

            element.on('$destroy', function(){
              ctrl.$setViewValue(undefined);
              ngModel.$render();
            });

            element.on('change', function(e){
                ctrl.$setViewValue(attrs.value);
                ngModel.$render();
            });

        }
    };
});

Answer 2

ngModel ngModel.$setViewvalue(undefined), ngModel ngModelController link.

$parse API ngModel ( ngModel).

, isolated scope ( , , , , )

.directive('smRadioButton', function(){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel){
            //var getter = $parse($attrs.ngModel);
            //setter = getter.assign;
            //Instantiate checkbox on load and set value to undefined
            element.parent().checkbox();

            element.on('$destroy', function(){
              ngModel.$setViewValue(undefined);
              //setter($scope, undefined);
            })            

            element.on('change', function(e){
                scope.$apply(function(){
                    ngModel.$setViewValue(attrs.value);
                    //setter($scope, attrs.value);
                });
            });
        }
    };
})