如何将属性评估为使用 Angular 1.5 组件的自定义函数的字符串?
Posted
技术标签:
【中文标题】如何将属性评估为使用 Angular 1.5 组件的自定义函数的字符串?【英文标题】:How to eval an attribute as string which is a custom function using Angular 1.5 component? 【发布时间】:2016-07-30 20:46:39 【问题描述】:我正在使用 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");' ... ];
有人有想法让它发挥作用吗?
【问题讨论】:
【参考方案1】: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 而不是颠覆它。
【讨论】:
谢谢你!即使这不是你的解决方案,你也帮了我很多。【参考方案2】:解决方案几乎就像 Scott 所说的那样。组件中的 $eval 不起作用,甚至 $rootScope.$eval 所以我使用了函数 eval() 并在控制器中将我的自定义函数绑定到要在 menuitem 组件中执行的 $rootScope。
1) 在 menuitem.html (menuitem 组件) -> 添加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 组件的自定义函数的字符串?的主要内容,如果未能解决你的问题,请参考以下文章
在 Angular 1.5 组件中实现组件 require 属性