角度1.5コンポーネントを使用してカスタム関数である文字列として属性を評価するにはどうすればよいですか？

Question

私はAngular 1.5を使用しています。 コンポーネントであるメニューを作成しました。 メニューコンポーネントは、属性として、jsonObjectのリストを受け取り、各メニューアイテムを作成します。

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

menuitemもコンポーネントです。 私が評価され、文字列などのカスタム機能になり、「アクション」のような属性を追加したいデータ-ngがクリック...この種の：

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

データが私のメインコントローラでのようにすることができます：

$scope.menuitems = [ { label: 'menuitem 1', action: 'alert("test");'} ... ]; 

誰かがそれを動作させる考えですか？

Answer 1

解決策はほとんどScottさんが言ったとおりです。コンポーネントの$ evalは動作しません。$ rootScope。$ evalなので、関数eval（）を使用し、コントローラでは、カスタム関数を$ rootScopeにバインドしてmenuitemコンポーネントで実行します。 >追加データ-ngのクリック= "$ ctrl.evaluateAction（）" コンポーネントのcontroler（menuitem.jsで

<button data-ng-click="$ctrl.evaluateAction()"></button> 

2） - menuitem.html（メニュー項目の構成要素）で

1） ） - > menu.htmlで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）（メニューコンポーネント）action属性を追加する追加

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

4）は、主制御装置では -

angular.module('app') 
    .controller('MainController', ['$rootScope', '$scope', function($rootScope, $scope){ 
      $rootScope.openDialog = function(key){ 
       if(key === 'open'){ 
        alert("open"); 
       } 
      }; 
    ... 

5）アクションはJSONで属性データを追加... $ rootScope.openDialog（）などのカスタム機能を追加

{ label : "foo" , action: "$rootScope.openDialog('open')"} 

それは動作します!!!!

Answer 2

ng-click="evaluateAction(item.action)"$scope.evaluateAction = eval。ただし、evalを使用することはほとんどありません。代わりに$evalを使用できます。角度式だけをサポートし、スコープに対しても適用されます。

だから、{ action: 'openDialog(item.label)' }を代わりに使用して、ng-click="evaluateAction(item.action, item)"の場合は$scope.evaluateAction = (action, item) => $eval(action, item)と使用してください。

これはまだ最も良い解決策ではありませんが、少なくともAngularのコンテキストで機能を維持していますので、逆転させるのではなくAngularで作業する必要があります。