如何使用Angular 1.5组件将属性求值为字符串，这是一个自定义函数

How to eval an attribute as string which is a custom function using Angular 1.5 component?

本文关键字：自定义函数 一个 字符串 Angular 何使用 组件 属性      更新时间：2024-04-06

我使用的是Angular 1.5。我创建了一个菜单，它是一个组件。菜单组件接受jsonObject的列表作为属性来创建每个菜单项。

<comp-menu items="menuitems" ></comp-menu>

菜单项也是一个组件。我想添加一个像"action"这样的属性，它将是一个自定义函数，作为数据点击中的求值字符串。。。这类：

<comp-menuitem data-ng-repeat="item in items" data-ng-click="eval({{item.action}})"></comp-menuitem>

数据可以像在我的主控制器中一样：

$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而不是破坏它的环境。

解决方案几乎如Scott所说$组件中的eval不起作用，甚至$rootScope也不起作用$eval，所以我使用了函数eval（），在控制器中，我将自定义函数绑定到要在menuitem组件中执行的$rootScope。

1） 在menuitem.html（菜单项组件）->添加数据ng click="$ctrl.evalateAction（）"

<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（菜单组件）中添加动作属性

<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')"}

它起作用了！！！！

相关文章：