大家好，
我遇到数据绑定问题。我正在使用angulat boostrap模式向Laravel API发送一个帖子请求，我收到了正确的信息。我在数组中推送结果，数组已更新，但DOM不是。
你能指出我正确的方向吗？
这是我在模态中使用的表单：
<div class="container" ng-controller="ProjectsController">
<div class="row title">
<h2>Project Info <small>Please fill in all the fields</small></h2>
</div>
<div class="row">
<form ng-submit="createProject()">
<div class="form-group">
<!-- <label for="project-name" class="col-sm-2 control-label">Project name:</label> -->
<div class="col-sm-12">
<input type="text" name="name" id="project-name" class="form-control" placeholder="Project name" ng-model="new_project.name" required>
</div>
</div>
<div class="form-group">
<!-- <label for="project-name" class="col-sm-2 control-label">Project name:</label> -->
<div class="col-sm-12">
<textarea name="description" id="project-description" class="form-control" rows="3" placeholder="Project description" ng-model="new_project.description" required></textarea>
<!-- <input type="text" name="description" id="project-description" class="form-control" placeholder="Project description" ng-model="new_project.description" required> -->
</div>
</div>
<div class="form-group">
<div class="pull-left">
<button type="submit" class="btn btn-primary" ng-click="ok()">Submit project</button>
</div>
<div class="pull-left">
<button type="submit" class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</div>
</form>
这是我想要更新DOM以及触发对话框的位置
<div class="create-proj" ng-controller="ProjectsController">
<button id="saveProfileButton" class="primaryButton" ng-click="createModalNewProject()">Create Project</button>
</div>
<ul class="projects" ng-controller="ProjectsController">
<li ng-repeat="project in Projects">
<ul>
<li>
<h4><span class="title" ng-bind="project.name"></span>
<span class="dropdown left-navigation-project-settings-icons dropdown-toggle" data-toggle="dropdown"></span>
</h4>
</li>
</ul>
</li>
</ul>
这是角度控制器：
angular.module('app.dashboard.projects')
.controller("ProjectsController", function($scope, $modal, $resource, ProjectsFactory){
$scope.Projects = {};
$scope.new_project = {};
$scope.createModalNewProject = function(){
// console.log("bla");
var modalInstance = $modal.open({
templateUrl: 'js/modules/projects/views/new-project.html',
controller : ModalController
});
};
$scope.createProject = function () {
ProjectsFactory.create($scope.new_project).$promise.then(function(data){
$scope.Projects.push(data.projects);
});
};
$scope.updateList = function(){
$scope.Projects.push(data.projects);
};
showAll();
function showAll(){
ProjectsFactory.show().$promise.then(function(data){
return $scope.Projects = data.projects;
});
};
});
这是我正在使用的工厂：
angular.module('app.dashboard.projects')
.factory('ProjectsFactory', function ($resource) {
return $resource('api/v1/projects/:projectId', {}, {
show: { method: 'GET' },
create: { method: 'POST' },
update: { method: 'PUT', params: {id: '@id'} },
delete: { method: 'DELETE', params: {id: '@id'} }
})
});
答案 0 :(得分：1)
数据未更新的原因是因为模态是隔离范围而您没有将数据传递给模态范围。示例如何解决它：
angular.module('app.dashboard.projects')
.controller("ProjectsController", function($scope, $modal, $resource, ProjectsFactory) {
$scope.createModalNewProject = function() {
var modalInstance = $modal.open({
templateUrl: 'js/modules/projects/views/new-project.html',
controller: function($scope, $modalInstance, items) {
$scope.items = items;
console.log($scope.items);
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
},
resolve: {
items: function() {
return ProjectsFactory.show().$promise.then(function(data) {
return data;
});
}
}
});
};
});
答案 1 :(得分：1)
经过一番挖掘，我改变了控制器，现在它看起来像这样。我忘了播放我的ajax调用的响应，所以我可以在模态范围之外显示它。谢谢你的帮助。
var CreateController = function($scope, $modalInstance, items,ProjectsFactory, $rootScope ){
$scope.new_project = {};
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
$scope.createProject = function (items) {
ProjectsFactory.create($scope.new_project).$promise.then(function(data){
if(data.error){
$rootScope.$broadcast('project.update', data.result);
}
$rootScope.$broadcast('project.update', data.result);
});
};
};
app.controller("ProjectsController",['$scope','$modal','$resource','ProjectsFactory','$timeout','$rootScope', function(
$scope,
$modal,
$resource,
ProjectsFactory,
$timeout,
$rootScope
){
$scope.Projects = [];
$scope.$on('project.update', function(event, data) {
$scope.Projects.unshift(data);
});
function showAll(){
ProjectsFactory.show().$promise.then(function(data){
$scope.Projects = data.result;
});
}
showAll();
// $scope.addProject = function(){
// $scope.Projects = $rootScope.Projects;
// $timeout(function(){$scope.$apply()},500);
// }
$scope.createModalNewProject = function(){
var modalInstance = $modal.open({
restrict: 'E',
templateUrl: '/js/modules/projects/views/new-project.html',
controller: CreateController,
resolve: {
items: function() {
return ProjectsFactory.show().$promise.then(function(data) {
return data.result;
});
}
}
});
};
$scope.safeApply = function(fn) {
var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest') {
if(fn && (typeof(fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
}]).controller('CreateController',['$scope','$modalInstance','items','ProjectsFactory','$rootScope',CreateController]);
答案 2 :(得分：0)
我认为流程是错误的，在你的控制器中做这样的事情
angular.module('app.dashboard.projects')
.controller("ProjectsController", function($scope, $modal, $resource, ProjectsFactory) {
$scope.Projects = ProjectsFactory.get();
}