如何使用 Angular 1.5 组件将属性作为自定义函数评估为字符串?
How to eval an attribute as string which is a custom function using Angular 1.5 component?
我正在使用 Angular 1.5。
我创建了一个菜单,它是一个组件。
菜单组件接受一个 jsonObject 列表作为属性来创建每个菜单项。
<comp-menu items="menuitems" ></comp-menu>
菜单项也是一个组件。
我想添加一个像 "action" 这样的属性,这将是一个自定义函数,作为 data-ng-click 中的评估字符串... 这种:
<comp-menuitem data-ng-repeat="item in items" data-ng-click="eval({{item.action}})"></comp-menuitem>
数据可以像我的 MainController 中的那样:
$scope.menuitems = [ { label: 'menuitem 1', action: 'alert("test");'} ... ];
有人有想法让它发挥作用吗?
ng-click="evaluateAction(item.action)"
其中 $scope.evaluateAction = eval
。然而,使用 eval
很少是一个好主意,您可以改用 $eval
,它只支持 Angular 表达式,并且它也适用于范围。
因此您可以使用 { action: 'openDialog(item.label)' }
,然后将其与 ng-click="evaluateAction(item.action, item)"
一起使用,其中 $scope.evaluateAction = (action, item) => $eval(action, item)
.
这仍然不是最好的解决方案,但至少它使您的功能保持在 Angular 上下文中并使其成为现实,因此您需要使用 Angular 而不是颠覆它。
解决方法和斯科特说的差不多。组件中的 $eval 不起作用,即使是 $rootScope.$eval 所以我使用函数 eval() 并且在控制器中我将自定义函数绑定到 $rootScope 以在 menuitem 组件中执行。
1) 在menuitem.html(菜单项组件)-> 添加data-ng-click="$ctrl.evaluateAction()"
<button data-ng-click="$ctrl.evaluateAction()"></button>
2) 在组件控制器中(menuitem.js) -> 添加evaluateAction()
function menuitemController($rootScope, $scope, $element, $attrs) {
var ctrl = this;
...
ctrl.evaluateAction = function(){
eval(ctrl.action);
}
}
angular.module('app')
.component('appMenuitem', {
transclude: false,
controller: menuitemController,
bindings :{
label : '@',
...
action: '@'
},
templateUrl: 'angular/components/menuitem/menuitem.html'
});
3) 在 menu.html(菜单组件)中添加 action 属性
<comp-menuitem data-ng-repeat="item in items" action="{{ item.action }}"></comp-menuitem>
4) 在主控制器中 - 添加自定义函数 $rootScope.openDialog()...
angular.module('app')
.controller('MainController', ['$rootScope', '$scope', function($rootScope, $scope){
$rootScope.openDialog = function(key){
if(key === 'open'){
alert("open");
}
};
...
5) 在JSON
中添加动作属性数据
{ label : "foo" , action: "$rootScope.openDialog('open')"}
而且有效!!!!
我正在使用 Angular 1.5。 我创建了一个菜单,它是一个组件。 菜单组件接受一个 jsonObject 列表作为属性来创建每个菜单项。
<comp-menu items="menuitems" ></comp-menu>
菜单项也是一个组件。 我想添加一个像 "action" 这样的属性,这将是一个自定义函数,作为 data-ng-click 中的评估字符串... 这种:
<comp-menuitem data-ng-repeat="item in items" data-ng-click="eval({{item.action}})"></comp-menuitem>
数据可以像我的 MainController 中的那样:
$scope.menuitems = [ { label: 'menuitem 1', action: 'alert("test");'} ... ];
有人有想法让它发挥作用吗?
ng-click="evaluateAction(item.action)"
其中 $scope.evaluateAction = eval
。然而,使用 eval
很少是一个好主意,您可以改用 $eval
,它只支持 Angular 表达式,并且它也适用于范围。
因此您可以使用 { action: 'openDialog(item.label)' }
,然后将其与 ng-click="evaluateAction(item.action, item)"
一起使用,其中 $scope.evaluateAction = (action, item) => $eval(action, item)
.
这仍然不是最好的解决方案,但至少它使您的功能保持在 Angular 上下文中并使其成为现实,因此您需要使用 Angular 而不是颠覆它。
解决方法和斯科特说的差不多。组件中的 $eval 不起作用,即使是 $rootScope.$eval 所以我使用函数 eval() 并且在控制器中我将自定义函数绑定到 $rootScope 以在 menuitem 组件中执行。
1) 在menuitem.html(菜单项组件)-> 添加data-ng-click="$ctrl.evaluateAction()"
<button data-ng-click="$ctrl.evaluateAction()"></button>
2) 在组件控制器中(menuitem.js) -> 添加evaluateAction()
function menuitemController($rootScope, $scope, $element, $attrs) {
var ctrl = this;
...
ctrl.evaluateAction = function(){
eval(ctrl.action);
}
}
angular.module('app')
.component('appMenuitem', {
transclude: false,
controller: menuitemController,
bindings :{
label : '@',
...
action: '@'
},
templateUrl: 'angular/components/menuitem/menuitem.html'
});
3) 在 menu.html(菜单组件)中添加 action 属性
<comp-menuitem data-ng-repeat="item in items" action="{{ item.action }}"></comp-menuitem>
4) 在主控制器中 - 添加自定义函数 $rootScope.openDialog()...
angular.module('app')
.controller('MainController', ['$rootScope', '$scope', function($rootScope, $scope){
$rootScope.openDialog = function(key){
if(key === 'open'){
alert("open");
}
};
...
5) 在JSON
中添加动作属性数据{ label : "foo" , action: "$rootScope.openDialog('open')"}
而且有效!!!!