如何通过Angular按钮重复调用指定JS脚本

步骤1：封装脚本逻辑为可调用函数 #

修改products/products_list.js，将原本页面加载时自动执行的代码包装成一个全局函数，同时保留页面加载时的初始执行：

// products/products_list.js
function refreshProductList() {
  // 这里放入原本脚本中所有需要执行的逻辑
  // 比如初始化产品列表、绑定交互事件、更新DOM等操作
}

// 页面加载时先执行一次，保持原有功能
refreshProductList();

步骤2：在按钮点击事件中调用该函数 #

因为你的按钮使用AngularJS的ng-click绑定了packageCtrl.add(rlCtrl)，直接在控制器的add方法里添加函数调用即可：

// 对应packageCtrl控制器的代码
angular.module('yourAppName').controller('packageCtrl', function() {
  var vm = this;

  vm.add = function(rlCtrl) {
    // 保留原本add方法的业务逻辑
    // ...

    // 调用脚本中的刷新函数
    refreshProductList();
  };

  vm.disableAdd = function() {
    // 保留原本的禁用判断逻辑
    // ...
  };
});

备选方案（无需修改控制器时） #

如果暂时无法修改控制器代码，可以直接在ng-click指令中追加函数调用：

<div class="col-md-1 form-group"><br/>
  <input type="button" class="btn btn-primary" value="Add Button" 
         ng-click="packageCtrl.add(rlCtrl); refreshProductList()" 
         ng-disabled="packageCtrl.disableAdd()"/>
</div>

注意事项 #

不要通过动态创建<script>标签重新加载脚本，这种方式会导致代码重复执行、全局变量污染，甚至引发内存泄漏，属于不规范的实现方式。封装函数调用是更可靠、可维护的方案。

内容的提问来源于stack exchange，提问作者Willingtolearn