避免angularjs函数的重复
我有以下解析JSON文件的函数:避免angularjs函数的重复,angularjs,ionic-framework,ionic,Angularjs,Ionic Framework,Ionic,我有以下解析JSON文件的函数: myApp.controller('myCtrl1', function($scope, $http, $compile, $interpolate, $templateCache) { $http.get('JSONFile1.json').success(function(data) { for (var i in data) { var interpolated = $interpolate($templat
myApp.controller('myCtrl1', function($scope, $http, $compile, $interpolate, $templateCache) {
$http.get('JSONFile1.json').success(function(data) {
for (var i in data) {
var interpolated = $interpolate($templateCache.get("Tpl1").trim())(data[i]);
angular.element(document.querySelector("#loadTpl1")).append($compile(interpolated)($scope));
}
});
});
但是我有几个JSON文件需要分别解析。如果我想解析这个文件,我必须为每个文件再次编写一个类似的函数,如:
myApp.controller('myCtrl2', function($scope, $http, $compile, $interpolate, $templateCache) {
$http.get('JSONFile2.json').success(function(data) {
for (var i in data) {
var interpolated = $interpolate($templateCache.get("Tpl2").trim())(data[i]);
angular.element(document.querySelector("#loadTpl2")).append($compile(interpolated)($scope));
}
});
});
因此,函数会进一步相乘。所有函数都相同,但ID不同
如何将所有这些外观相同的函数放在一个函数中,以便解析函数中的每个JSON文件并编写更少的代码
编辑:
json文件的内容(示例):
从html调用函数:
<div ng-controller="myCtrl1" id="loadTpl1">
<script type="text/ng-template" id="Tpl1">
<a style="color:{{color}}; background-color:{{backgroundcolor}};" id="{{id}}" class="{{type}}" href="{{toPage}}" ng-controller="{{controller}}" ng-click="{{function}}">
<i id="{{iconid}}" class="{{icon}}">{{texticon}}{{linebreak}}</i>
<br>{{name}}
</a>
</script>
</div>
可以看到,我可以在页面中添加HTML组件,也可以从JSON文件中删除它们。这就是上述函数的全部功能。最好创建一个指令,该指令调用自定义JSON服务,如下所示:
myApp.factory('jsonGetter',['http', function( $http ) {
return function( $id ) {
return $http.get('JSONFile' + $id + '.json');
}
}]);
myApp.directive('jsonData',['$scope', '$compile', '$interpolate', '$templateCache','jsonGetter', function() {
return {
scope: {
id: '='
},
tempalteUrl:'jsonTemplate.html',
link: function( scope, $elm ) {
jsonGetter( scope.id ).then(function( data ) {
// I assume that data is an array where
// there is an object you specified in your answer
angular.extend( scope, data[0] );
});
}
};
}]);
在jsonTemplate.html
中:
<a ng-style="{ 'color' : color,'background-color': backgroundcolor }" id="{{id}}" class="{{type}}" href="{{toPage}}" ng-controller="{{controller}}" ng-click="{{function}}">
<i id="{{iconid}}" class="{{icon}}">{{texticon}}{{linebreak}}</i>
<br>{{name}}
</a>
当我们按如下方式调用指令时,它使用服务根据id获取数据,然后使用服务器数据扩展模板的范围:
<json-data id="1"></json-data>
我编辑了这个问题。也许现在这个问题更容易理解。也许你可以帮我更多的忙,并相应地调整你的代码?检查编辑后的答案,因为我认为使用指令,工作会变得更容易,但我有几个JSON文件和几个HTML模板,其中JSON内容将被解析。如何以及在何处包含这些不同的JSON文件?我的意思是,我不必每次都为每个JSON文件和HTML模板编写一个新函数。
<json-data id="1"></json-data>