AngularJs: How to re-attach a handler after using ng-if?

Question

I've looked at this question where it says:

When to favor ng-if vs. ng-show/ng-hide?

"For example, if you bound a click handler to one of child elements, when ng-if evaluates to true, that element will be removed from DOM and your click handler will not work any more, even after ng-if later evaluates to true and displays the element. You will need to reattach the handler."

What does it mean to reattach the handler though? For this example here, the function bound to ng-click actually works even when I remove and add the element.

<tr ng-if="!useUserLoginTemplate" class="showRowAnimation">

          <td>Template</td>
          <td>
              <input type="file" file-model="loginTemplateFile">  
              <span class="btn btn-primary" ng-click="uploadLoginTemplateFile()">Upload</span> 
          </td>

</tr>

I cannot access the file using $scope.loginTemplateFile like I do with the versions without ng-if though.

File-model directive linking function:

link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
 }

What is going on here?

Have you tried using a scope on your directive instead of parsing the attribute? Say like `scope: { templateFile: '=fileModel' }` and then setting `scope.templateFile`? (I don't know really why `$parse` doesn't work, but it might be worth a try) — Michael Rose, Apr 08 '14 at 17:13

score 4 · Answer 1 · edited May 23 '17 at 12:13

In theory (not always true, but generally), 'reattaching the handler' applies to handlers that are being generated in imperative code, buried somewhere in a controller or another directive or something. Using a nice declarative directive like ng-click shouldn't be a problem, because those handlers are going to be re-attached for you by Angular whenever that template is rendered. In my subsequent answer to the SO post you cite, I talked about how imperative handlers like that are generally a bad idea, unless they're conditional to some model data that persists between views.

To your more specific question about why you can't access $scope.loginTemplateFile, it would help to have a Fiddle to debug. One question: why not just use ng-model to declare your model binding and keep that cleaner? You can access ng-model information a bit more declaratively then, by using the require: property to inject it, as in this article. (My initial suspicion would be that the form you're using is resulting in the loginTemplateFile property getting written onto multiple scopes somehow, particularly if the template we're seeing is getting rendered into the DOM based on an ng-repeat or something.)

A pity that this was not accepted as the answer, in order to make things clearer to others who are searching. I have just read the referenced question and was about tho ask exactly this question (until I discovered that this existed). I would have accepted this as the answer. OP? — Mawg says reinstate Monica, Feb 15 '16 at 08:24

score 0 · Answer 2 · answered Sep 01 '15 at 11:44

You cannot access the file using $scope.loginTemplateFile because your directive name itself is file-model and you are calling the directive name as attribute in your link function.

To access the parent scope data and when you are restricting the directive to be of 'Attribute' type then please refer the below updated code snippet.

<input type="file" file-model attrName="loginTemplateFile">

Where file-model is your directive and attrName is the attribute name which can be referenced by the directive's link function. I am modifying the link function to use the updated attribute name

link: function(scope, element, attrs) {
        var model = $parse(attrs.attrName);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
 }

Please refer the angular docs on how to create the directives..

AngularJs: How to re-attach a handler after using ng-if?

2 Answers2