angular：在指令模板中使用 ng-click 调用带参数的函数

Question

这里 angular 的新手 :)
我有一个自定义指令，其中有一个 ng-click，它调用我在控制器（不是指令控制器）中定义的函数。
这是 html 视图：

<course-pass course-id="bla"/>

这是指令：

 scotchApp.directive("coursePass", function($compile) {
    return {
    restrict: "E",
    controller: 'dropdownCtrl',
    replace:'true',
    templateUrl: 'template/coursepass.html',
    scope: {
            courseId: '@courseId',
        }
    }
});

这是coursepass.html（模板）：
重要的一行是 li 标签

<div class="btn-group courseContainer" dropdown>
    <button type="button" class="btn dropdown-toggle course passedCourse" dropdown-toggle ng-disabled="disabled" id="{{courseId}}">
        some name<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a ng-click="markFail({{courseId}})">mark fail</a></li>
    </ul>
</div>

这是 dropdownCtrl 控制器中的函数：

$scope.markFail = function(courseId) {
    alert("we do nice things");
    // do some stuff
}

函数呈现良好，{{courseId}} 也呈现良好
但是我得到这个错误：

Error: [$parse:syntax] http://errors.angularjs.org/1.2.25/$parse/syntax?p0=courseId&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=12&p3=markFail(%7B%7BcourseId%7D%7D)&p4=courseId%7D%7D)
    at Error (native)

在 angular 网站上说：

Syntax Error: Token 'courseId' is at column {2} of the expression [{3}] starting at [{4}].

并且 ng-click 不会触发该功能。
当我将 temeplte 更改为如下内容时：

<li><a ng-click="markFail(someString)">mark fail</a></li>

我可以看到点击有效并调用了markFail函数，但传递的参数未定义。

我做错了什么？
谢谢！

Answer 1

您需要从参数中删除 {{}} -

<li><a ng-click="markFail(courseId)">mark fail</a></li>

那么为什么这对 markFail(someString) 不起作用？因为您没有在 someString 周围加上引号，所以 Angular 试图将 someString 解析为变量并得出结论认为它是未定义的。如果你改为 markFail("someString")，你应该没问题。

angular：在指令模板中使用 ng-click 调用带参数的函数

angular: calling a function with parameter using ng-click inside directive template

angularjs

angularjs-directive

angularjs-ng-click