如何解决数据不会通过服务传递给其他控制器
我正在尝试将我的数据从控制器1传递到控制器2，但是当我将数据记录到控制器2中时，它返回的值为undefined。之所以使用jquery来请求数据，是因为我使用的是数据表，而且我不知道如何使用angularjs和datatables框架进行事件绑定。我想知道根据控制器1向其发送数据的方式，我对工厂服务的实现是否正确，因为我认为这就是我现在的问题所在。数据没有通过工厂服务。
工厂服务
app.factory('profilingFactory',function() {
var factoryData = {};
var factoryModel = {};
factoryData.setModel = function(key,value) {
factoryModel[key] = value;
}
factoryData.getModel = function(key) {
return factoryModel[key];
};
return factoryData;
});
控制器1
app.controller('profilingController',function($scope,$http,$window,profilingFactory) {
$(document).ready(function() {
$scope.table = $('#table_profile').DataTable ({
"ajax": {
"url": "/getProfilesData",},"columns": [
{"data": "applicant_id"},{"data": "application_type"},{"data": "last_name"},{"data": "middle_name"},{"data": "first_name"},{"data": "birth_date"},{"data": "address"},{"data": "sex"},{"data": "date_applied"},{
"data": "applicant_id","mRender": function (data,type,full) {
var editLink = '<button id="editFunc" class="btn btn-primary" type="button" data-id="' + data + '">Edit</button>';
//var editLink = '<a id="editFunc" class="editFunction" href="/editProfiles?applicant_id=' + data + '">Edit</a>';
var deleteLink = '<button class="btn btn-primary" id="deleteButtonFunc" type="button" data-id="'+ data +'">Delete</button>';
return (editLink + " " + " | " + " " + deleteLink);
}
}
]
});
$('body').on('click','#editFunc',function(e) {
var clickedEdit = $(this);
var id = clickedEdit.attr("data-id");
var url = "/editProfiles?applicant_id=" + id;
var editData = {
editId: id
}
//$(location).attr('href',url);
$http.get('/getEditProfilesData/',{params: editData}).then(function(response) {
//this is orignally what I inteded. I only put a string to test if the service is working
profilingFactory.setModel('proFactor',response.data);
});
});
$scope.stringXample = "Yeh";
//$scope.editProfiles = appData;
$('body').on('click','#deleteButtonFunc',function(e){
var clicked = $(this);
var id = clicked.attr("data-id");
var deleteData = {
deleteId: id
}
$http.get('/delProfileData/',{params: deleteData}).then(function(response) {
clicked.parents("tr").remove();
alert("User info successfully removed");
});
//Optional delete Row after
});
});
控制器2
app.controller('editProfliesController',profilingFactory) {
$scope.value = profilingFactory.getModel('proFactor');
console.log($scope.value);
});
HTML
<div class="row">
<h1 class="header-edit">Basic Information</h1>
<div class="col-md-3">
<div class="form-group">
<label for="pwd">Last Name:</label> <input type="text"
class="form-control" name="pwd" value="{{appData.last_name}}">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="email">First Name:</label> <input type="text"
class="form-control" name="email" value="{{appData.first_name}}">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="pwd">Middle Name:</label> <input type="text"
class="form-control" name="pwd">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="pwd">Birth:</label> <input type="date"
class="form-control" name="pwd" >
</div>
</div>
</div>
解决方法
我在本地尝试了您的代码。我先了解一下这个问题。
Controller1和Controller2已在初始页面渲染中加载。加载后，Controller2的“功能”将不再执行。 在Controller1中完成$ http.get之后，实际上实际上需要再次使其一部分启动。 您可以使用 $ watch （https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch）来实现。
将 setModel 保留在$ http.get中，并将Controller2逻辑更改为下面，然后重试：
app.controller('editProfliesController',function ($scope,$http,$window,profilingFactory) {
$scope.$watch(function () { return profilingFactory.getModel('proFactor') },function (newVal,oldVal) {
if (newVal!==oldVal)
console.log(newVal);
});
});
完整代码（最小的可复制示例）
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.factory('profilingFactory',function () {
var factoryData = {};
var factoryModel = {};
factoryData.setModel = function (key,value) {
factoryModel[key] = value;
}
factoryData.getModel = function (key) {
return factoryModel[key];
};
return factoryData;
});
app.controller('profilingController',profilingFactory) {
$(document).ready(function () {
$('body').on('click','#editFunc',function (e) {
//$(location).attr('href',url);
$http.get('/getEditProfilesData/',{ params: "" }).then(function (response) {
// I will not land here since call will fail for me. I am setting model in fail function below
// profilingFactory.setModel('proFactor',"hello world");
},function (response) {
profilingFactory.setModel('proFactor',"hello world");
});
});
$scope.stringXample = "Yeh";
//$scope.editProfiles = appData;
$('body').on('click','#deleteButtonFunc',function (e) {
var clicked = $(this);
var id = clicked.attr("data-id");
var deleteData = {
deleteId: id
}
$http.get('/delProfileData/',{ params: deleteData }).then(function (response) {
clicked.parents("tr").remove();
alert("User info successfully removed");
});
//Optional delete Row after
});
});
});
app.controller('editProfliesController',oldVal) {
if (newVal!==oldVal)
console.log(newVal);
});
});
</script>
<body>
<div ng-app="myApp">
<input type="button" id="editFunc" value="Edit"/>
<div ng-controller="profilingController"></div>
<div ng-controller="editProfliesController"></div>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
