带有 evel 的 ng-click 的动态加载功能

Question

你会在这里找到掠夺品：plunker

UI 是这样的：http://i.stack.imgur.com/7H1b3.png

我有 ng-repeat，我想用它在指令模板中创建 ng-click。模板名称为mainTemplate.html，其代码如下代码：

<form class="class">
  <p>Inside directive</p>

<div ng-repeat='mainJson in mainJsonData'>
    <div class="{{mainJson.divClass}}">
        <input ng-model="mainJson[mainJson.inputNgModel]" type="{{mainJson.inputType}}" class="{{mainJson.inputClass}}" placeholder="{{mainJson.placeHolder}}" maxlength='{{mainJson.inputMaxLength}}' value="{{mainJson.value}}" ng-click="mainJson[mainJson.ngClick]()"/>
        </div>
    </div>   
</div>
</form>

指令：

add.directive('testData', function() {
return {
    templateUrl: 'template/mainTemplate.html',
    controller: function($scope, $http) {
        $http.get('json/mainUi.json').success(function(response) {
            $scope.mainJsonData = response;
        });
    }
 };
});

json 是我试图创建指令的方法：

[
{
 "divClass":"form-group",
 "inputType":"text",
 "inputClass":"form-control",
 "inputNgModel":"mobile",
 "inputMaxLength":"10",
 "placeHolder":"mobile"
},
{   
 "divClass":"form-group",
 "inputType":"button",
 "inputClass":"btn btn-success",
 "ngClick":"addData",
 "value":"Save",
 "ngClickData":"name, city, mobile"
}
]

我正在寻找 ng-click 作为 :

ng-click="addData(name, city, mobile)

它应该与 ng-model 一起工作，因为 ng-model 也是从

创建的

Answer 1

您可以拆分数组中的字符串。

像例子：https://plnkr.co/edit/6RHVKKhWQC4r3JsBAPEJ?p=preview

我硬编码了你的内容，然后 name|city|mobile 你的是 mainJson[mainJson.inputNgModel]。

更新

它的工作原理，但我知道如果它很好地做你正在做的事情，维护将非常困难。

基于您的工作版本：https://plnkr.co/edit/opDKuIYkDmmR7Nk4xZeP?p=preview

带有 evel 的 ng-click 的动态加载功能

dynamic load function for ng-click with evel

angularjs

json

angularjs-ng-click