Question

查看以下角度指令：

angular.module("mySystem").directive("pageFooter", function () {
    return {
        restrict: "E",
        scope: { footerhref: '&' },
        template: <button onclick="{{footerhref}}">{{footerhref}}</button>
    }
});

<page-footer footerhref="location.href='\Home.html'" />

有人可以告诉我为什么footerhref没有通过onclick但是它对按钮内容有效吗？（我不想在内容中添加它。我刚刚添加了一个例子）。

这有可能解决吗？

如果我只是创建一个如下所示的按钮，它可以工作：

 <button onclick="location.href = '\Home.html'">Using onclick without Angular</button>

这就是我试图获取角度指令的方法。

Answer 1

onclick需要函数调用，而不是解析为字符串的表达式。

您必须使用&而不是@，因为我们传递的是可执行的代码行而不是字符串。

您必须使用ng-click代替onclick。基于documentation，onclick无效的原因是：

不允许使用HTML DOM事件属性的插值。请使用ng-版本（例如ng-click而不是onclick）。

此外，将templateUrl更改为template，因为您提供内联模板

您必须在$ scope中设置位置参考，因为您尝试从UI标记location访问<page-footer footerhref="location.href='\Home.html'" />

Here is a working plunker

app.directive("pageFooter", function ($compile) {
    return {
        restrict: "E",
        scope: { footerhref: '&', caption: '@' },
        template: '<button ng-click="footerhref()">{{caption}}</button>'
    }
});

<page-footer footerhref="location.href='\Home.html'" caption="Home"></page-footer>

$scope.location = location; // In your controller

无法通过角度指令传递给onclick

1 个答案: