AngularJS动态ng-click参数绑定异常问题求助

问题出在ng-click的绑定方式上，你不需要在指令的表达式里使用插值语法{{}}，AngularJS会直接解析表达式中的变量。

修复后的HTML代码 #

<a
    href="#"
    ng-if="action !== 'get'"
    class="btn btn-default btn-sm"
    ng-click="addGridRow(p.typeNo + 'Grid')"
    ng-attr-title="{{ 'common.add' | translate }}"
>
    <i class="fa fa-plus"></i>{{ 'common.add' | translate }}
</a>

原理说明 #

• ng-click接收的是AngularJS表达式，直接在表达式里用p.typeNo + 'Grid'就能完成字符串拼接，得到你需要的"1Grid"这类参数。
• 原来的写法'{{p.typeNo}}Grid'会把整个模板字符串作为参数传入函数，而不是解析后的结果，所以控制台会打印原始模板内容。
• JS部分的addGridRow函数无需修改，保持原有逻辑即可：

$scope.addGridRow = function (grid) {
    console.log(grid);
    $scope[grid].addRow();
};

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