AngularJs:如何在使用ng-if后重新附加处理程序？

Question

我看过这个问题,它说:

何时支持ng-if与ng-show/ng-hide？

"例如,如果将一个单击处理程序绑定到一个子元素,当ng-if计算结果为true时,该元素将从DOM中删除,并且您的单击处理程序将不再起作用,即使在ng-if后面的计算结果为true之后也是如此并显示元素.您需要重新附加处理程序."

虽然重新连接处理程序意味着什么？对于此示例,即使我删除并添加元素,绑定到ng-click的函数实际上也可以工作.

<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>

我无法使用$ scope.loginTemplateFile访问该文件,就像我使用没有ng-if的版本一样.

文件模型指令链接功能:

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]);
            });
        });
 }

这里发生了什么？

Answer 1

从理论上讲（并不总是如此，但通常如此），“重新附加处理程序”适用于在命令式代码中生成的处理程序，这些处理程序埋藏在控制器或其他指令或其他东西中的某个位置。使用像这样的好的声明性指令ng-click应该不是问题，因为每当渲染该模板时，Angular 都会为您重新附加这些处理程序。在我对您引用的 SO 帖子的后续回答中，我谈到了像这样的命令式处理程序通常是一个坏主意，除非它们以视图之间持续存在的某些模型数据为条件。

对于关于为什么无法访问的更具体问题$scope.loginTemplateFile，使用小提琴进行调试会有所帮助。一个问题：为什么不直接使用 ng-model 来声明你的模型绑定并保持简洁？require:然后，您可以通过使用属性注入来以更具声明性的方式访问 ng-model 信息，如本文中所示。（我最初的怀疑是，您使用的表单会导致loginTemplateFile属性以某种方式写入多个范围，特别是如果我们看到的模板基于 ng-repeat 或其他内容渲染到 DOM 中。）