AngularJS 指令并单击
AngularJS directive and ng-click
在控制器函数中,我正在调用一个 REST API,returns 我是一个数组。我正在使用 ng-repeat 以在 HTML table 中显示它。我也在使用这样的自定义指令:
<player id="transaction.id_player_to" name="transaction.player_to_name"></player>
我的指令代码如下:
etl.directive('player', function()
{
return {
restrict: 'E',
replace: true,
scope: {
id: '=',
name: '='
},
template: function()
{
return '<span class="bold"><a data-ng-click="utilities.showPlayerInfo({{ id }})" href="#">{{ name }}</a></span>';
}
}
});
当我显示我的页面时,我可以看到玩家的名字,但我也收到以下错误:
Error: [$parse:syntax] http://errors.angularjs.org/1.4.6/$parse/syntax?p0=%7B&p1=invalid%20key&p2=27&p3=utilities.showPlayerInfo(%7B%7BNaNd%20%7D%7D)&p4=%7B%id%20%7D%7D)
为了调试我的指令,我用数字替换了“{{ id }}”,然后错误消失了,但是当我点击玩家的名字时,没有任何反应,"utilities.showPlayerInfo" 函数是没有叫。这是一个在 Angular 自定义服务中声明的函数。我还在我的控制器中添加了以下行以使其可用:
$scope.utilities = utilities;
但是指令好像没有编译,或者不知道是什么...
最初的需求是我接收数据,大多数时候,球员信息都附在他们身上。我想将它们显示为 link,当我单击它们时会显示一个模态对话框。
你的指令模板 ng-click
不应该有插值
template: function()
{
return '<span class="bold">'+
'<a data-ng-click="utilities.showPlayerInfo(id)" href="#">{{ name }}</a>'+
'</span>'+
}
此外,为了使 ng-click
方法正常工作,您应该在为指令元素创建隔离范围时在指令范围内提供该服务引用。添加 link 函数并赋值 do $scope.utilities = utilities;
指令
etl.directive('player', function(utilities) {
return {
restrict: 'E',
replace: true,
scope: {
id: '=',
name: '='
},
template: function() {
return '<span class="bold">' +
'<a data-ng-click="utilities.showPlayerInfo(id)" href="#">{{ name }}</a>' +
'</span>' +
}
link: function(scope) {
//to make click workable, adding service reference to scope.
$scope.utilities = utilities;
}
}
});
在控制器函数中,我正在调用一个 REST API,returns 我是一个数组。我正在使用 ng-repeat 以在 HTML table 中显示它。我也在使用这样的自定义指令:
<player id="transaction.id_player_to" name="transaction.player_to_name"></player>
我的指令代码如下:
etl.directive('player', function()
{
return {
restrict: 'E',
replace: true,
scope: {
id: '=',
name: '='
},
template: function()
{
return '<span class="bold"><a data-ng-click="utilities.showPlayerInfo({{ id }})" href="#">{{ name }}</a></span>';
}
}
});
当我显示我的页面时,我可以看到玩家的名字,但我也收到以下错误:
Error: [$parse:syntax] http://errors.angularjs.org/1.4.6/$parse/syntax?p0=%7B&p1=invalid%20key&p2=27&p3=utilities.showPlayerInfo(%7B%7BNaNd%20%7D%7D)&p4=%7B%id%20%7D%7D)
为了调试我的指令,我用数字替换了“{{ id }}”,然后错误消失了,但是当我点击玩家的名字时,没有任何反应,"utilities.showPlayerInfo" 函数是没有叫。这是一个在 Angular 自定义服务中声明的函数。我还在我的控制器中添加了以下行以使其可用:
$scope.utilities = utilities;
但是指令好像没有编译,或者不知道是什么...
最初的需求是我接收数据,大多数时候,球员信息都附在他们身上。我想将它们显示为 link,当我单击它们时会显示一个模态对话框。
你的指令模板 ng-click
不应该有插值
template: function()
{
return '<span class="bold">'+
'<a data-ng-click="utilities.showPlayerInfo(id)" href="#">{{ name }}</a>'+
'</span>'+
}
此外,为了使 ng-click
方法正常工作,您应该在为指令元素创建隔离范围时在指令范围内提供该服务引用。添加 link 函数并赋值 do $scope.utilities = utilities;
指令
etl.directive('player', function(utilities) {
return {
restrict: 'E',
replace: true,
scope: {
id: '=',
name: '='
},
template: function() {
return '<span class="bold">' +
'<a data-ng-click="utilities.showPlayerInfo(id)" href="#">{{ name }}</a>' +
'</span>' +
}
link: function(scope) {
//to make click workable, adding service reference to scope.
$scope.utilities = utilities;
}
}
});