Javascript: 创建直接内联函数的对象数组

Question

我正在寻找创建 angular 指令以动态创建视图的解决方案。要使用它，我想传递一组定义为 "inline" 的对象。此对象包含一对 label/function。

当我将一个数组定义到一个范围并将其内容传递给元素属性时，它起作用了，但是当我将它定义到 "inline" 属性时，它抛出我 "Syntax error"。

什么是worgn？可以这样做吗？

HTML/JS:

(function() {
  var app = angular.module('MainApp', []);

  app.controller('MainController', ['$scope',
    function($scope) {
      $scope.myButtons = [{
        label: "Hellow!",
        onclick: function() {
          alert("Hellow!")
        }
      }, {
        label: "Bye!",
        onclick: function() {
          alert("Bye!")
        }
      }];
    }
  ]);

  app.directive('vgButtons', function() {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        buttons: '=buttons'
      },
      template: '<div>' +
        'Buttons:<br>' +
        '<button ng-repeat="button in buttons" ng-click="button.onclick()">' +
        '{{button.label}}' +
        '</button>' +
        '</div>'
    }
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MainApp" ng-controller="MainController">
  {{myButtons}}
  <!-- Works perfect with scope object -->
  <vg-buttons buttons='myButtons'>
  </vg-buttons>
  <!-- Works with "inline" defined array, but without define functions -->
  <vg-buttons buttons='[{label:"Hellow!", onclick: null}, {label:"Bye!", onclick: null}]'>
  </vg-buttons>
  <!-- Works with "inline" defined array, but functions doesn't work -->
  <vg-buttons buttons='[{label:"Hellow!", onclick: alert("Hellow!")}, {label:"Bye!", onclick: alert("Bye!")}]'>
  </vg-buttons>
  <!-- Doesn't work with "inline" functions (I WANTED THIS SOLUTION) -->
  <vg-buttons buttons='[{label:"Hellow!", onclick: function(){alert("Hellow!")}}, {label:"Bye!", onclick: function{alert("Bye!")}}]'>
  </vg-buttons>
</div>

Answer 1

来自文档：

No function declarations or RegExp creation with literal notation

You can't declare functions or create regular expressions from within AngularJS expressions. This is to avoid complex model transformation logic inside templates. Such logic is better placed in a controller or in a dedicated filter where it can be tested properly.

-- AngularJS Guide Expressions -- no function declarations

Javascript: 创建直接内联函数的对象数组

Javascript: Create object array with functions directly inline

html

javascript

javascript-objects

angularjs

angularjs-directive

No function declarations or RegExp creation with literal notation