来自json对象的指令中的angularjs动态模型答案

【问题标题】：angularjs dynamic model in directive from json object来自json对象的指令中的angularjs动态模型
【发布时间】：2016-03-11 08:50:06
【问题描述】：

我有一个对象的 json 文件，其中存储要在指令中使用的属性。我想在指令中使用 json obj 模型值，但我没有尝试任何工作。

有人知道我做错了什么/错过了什么吗？我觉得这很令人困惑。希望有人可以帮助尝试这几天！

编辑:: 我有一个 $http 服务，它获取并返回 Json 对象，我可以正常访问属性。

我特意尝试使用json obj模型属性的值——“model”:“ticketData.contactname”作为ng-model的动态值。

如果我只使用 ticketData.contactname obj，那么它工作正常，我可以编辑模型值，但如果我尝试使用 Json obj 中的字符串，那么它只会将字符串打印到输入框中。

我不知道该怎么办。我确信这是我所缺少的基本内容。

提前致谢

Json 示例：

[
    {
        "inputsContact" : [
            { 
                "labelName" : "Contact Name",
                "placeholder" : "Enter your name",
                "model" : "ticketData.contactname",
                "type" : "text"
            }
    }
]

HTML 示例：

<text-input-comp inputdata="contactName" ng-model="contactModel">    </text-input-comp>

指令 text-input-comp:

.directive('textInputComp', [ '$compile', function($compile){
  return {
    restrict: 'E',
    scope: {
      inputData: '=inputdata',
      modelData: '=ngModel'
    },
    templateUrl: '/app/views/partials/components/textInputComp.html'
  }
}]);

指令模板示例：

<label> {{ inputData.labelName }} </label> 
<input type="text" ng-model="modelData" ng-model-options="{ getterSetter: true }" placeholder="{{ inputData.placeholder }}"  /> 
<div ></div>

控制器示例：

$scope.contactName = $scope.inputData[0].inputsContact[0];
$scope.contactModel = $scope.inputData[0].inputsContact[0].model;

【问题讨论】：

标签： angularjs json directive angular-ngmodel

【解决方案1】：

我认为你需要先获取 json 文件，然后再进行所有操作

看看这段代码

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("customers.json").then(function (response) {
      $scope.myData = response.data.records;
  });
});
</script>

</body>
</html>

你缺少的是这个只需用您的 json 替换 customer.json 文件，您就可以开始了和

1.$http 是负责与其他文件通信的服务。 $http 表示从“js/data.json”获取文件，如果操作“成功”，则执行一个保存从 data.json 文件自动获取的“数据”的函数让你明白。

2. 上面再写一行： ['$scope', '$http', function($scope, $http){ ... }] 有点棘手：它需要一个包含两个对象的数组，一个是 $scope其他是服务，即 $http.我们在数组中有这个的原因是 angularJS 会自动缩小代码，这意味着它会删除多余的空格并缩短变量名以获得更快的性能，但有时这种缩小会导致麻烦，所以我们只是告诉控制器不要缩小数组中的 $scope、$http 服务和函数。

【讨论】：

嗨@Prateek，感谢您对此进行调查。我已经为此提供了服务-只是认为添加问题没有用。这就是我所拥有的：//在 Controller ::: 准备数据以创建输入 $scope.inputData = []; BuildInputService.getInputs(function(response) { $scope.inputData = response.data; }); //在服务中 .factory('BuildInputService', ['$http', function($http) { return { getInputs: function( callback ) { $http.get('app/data/input-creation-data.json' ) .then(function(response) { callback( response ); }); } }; }])