如何用常用代码重构angularjs控制器
How to refactor angularjs controllers with mostly common code
我对angularjs比较陌生。我有一些代码(HTML + JS),允许用户从范围内数组添加和删除条目。然而,现在我正在为不同的数组大量重复代码。我知道这可以重构,但我不确定angular的方法,除了我可能想要使用指令。如有任何帮助,不胜感激。
HTML
<div class="control-group" ng-class="{error: form.profile.seeking.$invalid}" ng-controller="SeekingCtrl">
<label class="control-label" for="profile.seeking">Seeking</label>
<div class="controls">
<ul ng-repeat="seeks in profile.seeking">
<li>{{seeks}} <button class="btn" ng-click="removeSeeks()">Remove</button></li>
</ul>
<input type="text" ng-model="newseeks" id="profile.seeking">
<button class="btn" ng-disabled="!newseeks" ng-click="addSeeks()">Add new</button>
</div>
<div class="control-group" ng-class="{error: form.project.offering.$invalid}" ng-controller="OfferingCtrl">
<label class="control-label" for="project.offering">Offering</label>
<div class="controls">
<ul ng-repeat="offer in project.offering">
<li>{{offer}} <button class="btn" ng-click="removeOffer()">Remove</button></li>
</ul>
<input type="text" ng-model="newoffer" id="project.offering">
<button class="btn" ng-disabled="!newoffer" ng-click="addOffer()">Add new</button>
</div>
Javascript
var SeekingCtrl = function($scope) {
$scope.addSeeks = function() {
$scope.profile.seeking = $scope.profile.seeking || [];
$scope.profile.seeking.push($scope.newseeks);
$scope.newseeks = "";
};
$scope.removeSeeks = function() {
$scope.profile.seeking = _.without($scope.profile.seeking, this.seeks);
};
};
var OfferingCtrl = function($scope) {
$scope.addOffer = function() {
$scope.project.offers = $scope.project.offers || [];
$scope.project.offers.push($scope.newoffer);
$scope.newoffer = "";
};
$scope.removeOffer = function() {
$scope.project.offers = _.without($scope.project.offers, this.offer);
};
};
终于想通了。
HTML
<div list-editor list="profile.skills" label="Skills">
</div>
指令
<div class="control-group" ng-controller="ListEditorCtrl">
<label class="control-label" for="{{list}}">{{label}}</label>
<div class="controls">
<ul ng-repeat="item in list">
<li>{{item}}
<button class="btn" ng-click="removeItem()"><i class="icon-remove"></i></button>
<button class="btn" ng-show="!$first" ng-click="moveUpItem()"><i class="icon-chevron-up"></i></button>
<button class="btn" ng-show="!$last" ng-click="moveDownItem()"><i class="icon-chevron-down"></i></button>
</li>
</ul>
<input type="text" ng-model="newitem" id="{{list}}" />
<button class="btn" ng-disabled="!newitem" ng-click="addItem()">Add new</button>
</div>
p4pApp.directive('listEditor', function () {
return {
restrict: 'A',
scope: {
list: '='
},
templateUrl: '/templates/common/list_editor_directive.html',
link: function(scope, element, attrs) {
scope.label = attrs.label;
}
};
}
);
控制器
var ListEditorCtrl = function($scope) {
$scope.addItem = function() {
$scope.list = $scope.list || [];
$scope.list.push($scope.newitem);
$scope.newitem = "";
};
$scope.removeItem = function() {
$scope.list.splice(_.indexOf($scope.list, this.item),1);
};
};
你的问题对我来说不够清楚,如果你把一个柱塞与一个更容易理解的示例代码,那就更好了,但我会尽量从我所理解的回答。
在services.js文件中执行如下操作:
app.factory('Seeks', ['$http', function($http){
var Url = "seeks.json";
var Seeks = $http.get(Url).then(function(response){
return response.data;
});
return Seeks;
}]);
app.factory('Offers', ['$http', function($http){
var Url = "offers.json";
var Offers = $http.get(Url).then(function(response){
return response.data;
});
return Offers;
}]);
在controllers.js中的执行如下操作:
var SeekingCtrl = function($scope, Seeks) {
Seeks.then(function(data){
$scope.seeks = data;
});
$scope.addSeeks = function(newseeks) {
$scope.seeks.push(newseeks);
newseeks = "";
};
$scope.removeSeeks = function(seek) {
$scope.seeks = _.without($scope.seeks, seek);
};
};
var OfferingCtrl = function($scope, Offers) {
Offers.then(function(data){
$scope.offers = data;
});
$scope.addOffer = function(newoffer) {
$scope.offers.push(newoffer);
newoffer = "";
};
$scope.removeOffer = function(offer) {
$scope.offers = _.without($scope.offers, offer);
};
};
不要忘记将Offers
和Seeks
注入到app.js文件中的控制器中,如下所示:
SeekingCtrl.$inject = ['$scope', 'Seeks'];
OfferingCtrl.$inject = ['$scope', 'Offers'];
更新:
将所有内容放到一个控制器中,像这样:
var MainCtrl = function($scope, Seeks, Offers) {
Seeks.then(function(data){
$scope.seeks = data;
});
Offers.then(function(data){
$scope.offers = data;
});
$scope.addSeeks = function(newseeks) {
$scope.seeks.push(newseeks);
newseeks = "";
};
$scope.addOffer = function(newoffer) {
$scope.offers.push(newoffer);
newoffer = "";
};
$scope.removeSeeks = function(seek) {
$scope.seeks = _.without($scope.seeks, seek);
};
$scope.removeOffer = function(offer) {
$scope.offers = _.without($scope.offers, offer);
};
};
更新2:var MainCtrl = function($scope, Seeks, Offers) {
Seeks.then(function(data){
$scope.seeks = data;
});
Offers.then(function(data){
$scope.offers = data;
});
$scope.add = function(item, type) {
$scope[type].push(item);
item = "";
};
$scope.remove = function(item, type) {
$scope[type] = _.without($scope[type], item);
};
};
类型可以是seek或offers。
为那些超出我能力范围的服务。
相关文章:
- 将值从html传递到AngularJS控制器
- angularjs-控制器在表单提交时未调用
- Angularjs控制器本地错误
- AngularJS:控制器中的函数被模板多次调用
- 将AngularJS控制器拆分为多个文件
- AngularJS控制器范围
- AngularJS控制器不工作,为什么?(简单的控制器示例)
- AngularJS控制器在注入工厂时抛出错误
- 如何使用onclick事件调用AngularJS控制器
- angularjs控制器未启动
- 设置AngularJS控制器属性不能是使用Coffeescript的最后一行
- 如何使AngularJS控制器依赖于通过ajax加载在rootScope上的值
- 通过因果报应测试管理angularjs控制器初始化
- AngularJs 控制器中的实时时钟功能
- Angularjs:控制器的代码组织
- 简单的AngularJS控制器不起作用
- 如何从 angularjs 控制器访问$resource
- 在 html5 视频结束时调用 AngularJS 控制器函数
- AngularJS控制器内部的功能
- AngularJS控制器中基于值的重定向