Question

这里有角度的新人:) 我有一个自定义指令，其中有一个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)

在有角度的网站上，它说：

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调用带参数的函数

1 个答案: