0

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

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

menuitem 也是一个组件。我想添加一个像“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");'} ... ];

任何人都有让它工作的想法？

4

2 回答 2

0

ng-click="evaluateAction(item.action)"哪里$scope.evaluateAction = eval。然而使用eval很少是一个好主意，你可以使用$eval它，它只支持 Angular 表达式，它也适用于范围。

因此，您可以{ action: 'openDialog(item.label)' }改为使用它，然后将其与ng-click="evaluateAction(item.action, item)"where一起使用$scope.evaluateAction = (action, item) => $eval(action, item)。

这仍然不是最好的解决方案，但至少它将您的函数保持在 Angular 上下文中并使其成为，因此您需要使用 Angular 而不是颠覆它。

于 2016-04-12T18:22:36.917 回答
0

解决方案几乎就像斯科特所说的那样。组件中的 $eval 不起作用，甚至 $rootScope.$eval 所以我使用了函数 eval() 并在控制器中将我的自定义函数绑定到 $rootScope 以在 menuitem 组件中执行。

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

它有效！！！！

于 2016-04-14T18:33:43.860 回答