我正在尝试更新,然后获取AngularJs工厂的更新值,我正在一个范围内设置该值,并试图在另一个范围内获取它,我正在设置一个工厂来处理我的应用程序中的弹出消息,因此不必重复我个人只希望有一家工厂来处理这些消息。
myApp.factory('msg',function ($modal) {
factory = {};
factory.text = '';
factory.modal;
factory.response;
factory.window = function () {
this.modal = $modal.open({
templateUrl:'partials/message/confirm.html',
controller:'cms'
});
}
factory.setText = function (text) {
this.text = text;
}
factory.getResponse = function () {
return this.response;
}
factory.confirm = function () {
this.modal.close();
this.response = true;
}
factory.cancel = function () {
this.modal.close();
this.response = false;
}
factory.confirmSave = function () {
this.text = 'save';
this.window();
}
factory.confirmUpdate = function () {
this.text = 'update';
this.window();
}
factory.confirmDelete = function () {
this.text = 'delete';
this.window();
}
return factory;
});
用户控制器
myApp.controller('users',function ($scope,$location,$http,msg) {
$http.get('api/v1/users')
.success(function (data,status) {
$scope.user = data;
})
.error(function (data,status) {
$location.path('/login');
});
$scope.showWrite = function () {
$scope.write = true;
}
$scope.closeWrite = function () {
$scope.write = false;
$scope.newUser = '';
}
$scope.save = function () {
$http.post('api/v1/users/store',$scope.newUser)
.success(function (data,status) {
$scope.user.unshift({
first_name: $scope.newUser.first_name,
last_name: $scope.newUser.last_name,
email: $scope.newUser.email,
role: $scope.newUser.role
});
$scope.write = false;
$scope.newUser = '';
})
.error(function (data,status) {
alert('failed');
});
}
$scope.confirmDelete = function (index,id) {
msg.confirmDelete();
if(msg.getResponse() === true){
$http.get('api/v1/users/destroy/'+id)
.success(function (data,status) {
$scope.user.splice(index,1);
})
.error(function (data,status) {
alert('failed');
});
};
console.log(msg.getResponse());
}
$scope.showUserInfo = function () {
}
});
您提供的代码似乎工作正常,问题出在其他地方,可能在cms
控制器或confirm.html
模板中。我已经为您的工厂制作了一个朋克,您可以在这里看到它的实时运行。
index.html
<div ng-controller="ctrl1">
<button ng-click="msg.confirmSave()">confirm save</button>
<span ng-if="msg.getResponse() !== undefined">Response: {{msg.getResponse()}}</span>
</div>
Confirm.html
<h1>{{msg.text}}</h1>
<button ng-click="msg.confirm()">Confirm</button>
<button ng-click="msg.cancel()">Cancel</button>
的JavaScript
angular.module('app',['ui.bootstrap']).
controller('cms', ['$scope', 'msg', function($scope, msg){
$scope.msg = msg;
}]).
controller('ctrl1', ['$scope', 'msg', function($scope, msg) {
$scope.msg = msg;
}]).
factory('msg',['$modal', function ($modal) {
// The same code as in the question
}]);
一些技巧:
var factory = {};
代替代替factory = {}
为了声明局部变量而不factory
偶尔覆盖全局。factory.modal;
并且factory.response;
不要factory
按您期望的那样在对象中声明相关属性,而是返回undefined
,因此将其删除,因为它们无用factory.setText
和facory.getResponse
是多余的,因为factory.text
和factory.response
是的公共属性factory
。如果要将它们专用于工厂,则将它们声明为var text;
,var response;
然后相应地更改访问器方法。getText
在这种情况下,将其添加到您的工厂中也将很有用。factory.modal
仅从工厂访问,则最好将其封装到您的工厂中(使其私有),如上一个项目符号所述。window
例如,不公开)应用所有技巧后,您的工厂可能如下所示:
factory('msg',['$modal', function ($modal) {
var text = '',
modal,
response;
function window () {
modal = $modal.open({
templateUrl:'confirm.html',
controller:'cms'
});
}
return {
setText: function (_text_) {
text = _text_;
},
getText: function() {
return text;
},
getResponse: function () {
return response;
},
confirm: function () {
modal.close();
response = true;
},
cancel: function () {
modal.close();
response = false;
},
confirmSave: function () {
text = 'save';
window();
},
confirmUpdate: function () {
text = 'update';
window();
},
confirmDelete: function () {
text = 'delete';
window();
}
};
}]);
这是一个矮人。
编辑:
用控制器代码更新帖子后,所有事情对我来说都是显而易见的:真正的问题是您confirmDelete()
同步使用,但它是异步的(因为将来返回值,一旦用户单击确认或取消,就返回值)!为与临时工打交道,角提供了$q
服务。为了使用它,您应该在中创建延迟对象factory.confirmSave()
,factory.confirmUpdate()
然后factory.confirmDelete()
返回它的promise并在factory.confirm()
和中解析/拒绝它factory.cancel()
。一旦承诺被解决或被拒绝,您可以从中获取值factory
或直接将其作为相关回调的参数获取。
工厂
function confirmDelete() {
deferred = $q.defer();
text = this;
window();
return deferred.promise;
}
控制器
msg.confirmDelete().then(function(value) {
// Resolved
$scope.response = value;
}, function(value) {
// Rejected
$scope.response = value;
});
完整的示例请参见以下示例。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句