避免angularjs函数的重复 [英] avoiding the repetition of angularjs function
问题描述
我有以下函数解析一个JSON文件:
I have the following function that parses a JSON file:
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文件。如果我要分析这个文件,我已经为每个文件再写类似的功能,如:
But I have several JSON files that I need to parse separately. If I want to parse this file, I have for each file write a similar function again, like:
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。
so the functions are further multiplied. All the functions are the same but have different IDs.
我怎样才能把所有这些相同的期待功能于一身的功能,这样我可以在一个函数解析每个JSON文件,少写code?
How can I put all these same looking functions in a function so that I could parse every JSON file in a function and write less code?
编辑:
JSON文件(例如)的内容:
the content of the json File (example):
[
{
"_comment": "Launch Camera Button",
"type": "button",
"id": "cameraBt",
"icon": "ion-android-camera",
"name": "Launch Cam",
"toPage": "",
"color": "white",
"function": "takePicture()",
"controller": "CameraCtrl",
"backgroundcolor": "#0066FF",
"font-size": "20px"
}
]
函数从HTML调用:
the call of the function from 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文件删除它们。这一切什么上面的功能,使
As can be seen, I can add HTML components in the page or delete them from the JSON file. This is everything what the function above makes.
推荐答案
这将是最好创建一个指令,它调用自定义JSON服务是这样的:
it would be best to create a directive, which calls your custom JSON service like this:
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的数据,然后扩展与服务器进行数据的模板的范围:
When we call the directive as below, it uses the service to get the data based on the id, then extend the scope of the template with the server data:
<json-data id="1"></json-data>
这篇关于避免angularjs函数的重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!