我有一个带有按钮打开模式“new_project_modal.html”的uibootstrap手风琴“angular_accordion.html”，以模态输入的值显示在twitter bootstrap面板中的“angular_tabel.html”中，并带有一个按钮以打开相同的模态“ new_project_modal.html“，我想在输入字段中显示值，以便用户可以编辑，但控制器”modal_new_project.js“中的范围内的值不可用。
我没有得到的另一件事是在“new_project_modal.html”，ng-controller =“ModalDemoCtrl as modalScope”，我必须使用ng-model =“modalScope.name”，ng-model =“name”不起作用，没有数据绑定，控制器没有范围，为什么？当它在其他视图中像ng-model =“something”一样工作而不需要“modalScope”。
AngularJS：1.4.7
UI Bootstrap：0.14.3
<div ng-controller="UibAccordionCtrl">
......
.....
<div ng-controller="ModalDemoCtrl">
<a href="#" id="project-popover" class="btn btn-default center-block" ng-click="open()"><i class="fa fa-bar-chart-o pull-left" id="test1"></i>Create Project</a>
</div>
............
.......
</div>
<div ng-controller="TabsCtrl as tabsController">
.........
<div class="panel panel-default" id="outer-panel" ng-repeat="panel in panels">
.............
............
.........
<div ng-controller="ModalDemoCtrl">
<button class="btn btn-default" ng-click="editProject(panel.name)"><i class="fa fa-edit"></i></button>
</div>
........
.......
</div>
<div ng-controller="ModalDemoCtrl as modalScope">
...............
.............
<form class="form-horizontal">
...........
<input type="text" class="form-control" id="userName" placeholder="Name" ng-model="modalScope.name">
.......
</form>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok(modalScope.name)">Create</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
var app = angular.module('modalNewProjectModule', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'partials/new_project_modal.html',
controller: 'ModalInstanceCtrl',
scope: $scope,
windowClass: 'test-modal-width',
backdrop: false,
resolve: {
projectName: function () {
return $scope.name;
}
}
});
};
$scope.editProject = function (name) {
var modalInstance = $uibModal.open({
templateUrl: 'partials/new_project_modal.html',
controller: 'EditModalInstanceCtrl',
scope: $scope,
windowClass: 'test-modal-width',
backdrop: false,
resolve: {
projectName: function(){
return name;
}
}
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, projectName, NewProjectService) {
$scope.ok = function(projectName) {
var new_project_params = {
'name': projectName,
'status': 'Status New'
};
NewProjectService.setValue(new_project_params);
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
app.controller('EditModalInstanceCtrl', function ($scope, $uibModalInstance, projectName, NewProjectService) {
$scope.name = projectName; //undefined
$scope.ok = function(project) {
var new_project_params = {
'name': projectName,
'status': 'Status New'
};
NewProjectService.setValue(new_project_params);
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
答案 0 :(得分：1)
至于你的代码，它有点难以理解，我认为其中一些可能不存在。函数调用似乎不适合容纳它们的控制器。所以我对你的问题的实际方面没什么帮助。如果你想创建一个plunker我将更新这个答案，并再次尝试你的代码和具体问题。
至于了解Controller As语法的更多信息（问题的第二部分），这可能对您有用，因为我认为您可能在几个地方使用了错误的范围版本。
如果您使用这样的标准控制器命名：
<div ng-controller="SampleController">
<span ng-bind="name"></span>
</div>
然后控制器将设置如下：
app.controller('ModalInstanceCtrl', function ($scope) {
$scope.name = "namegoeshere";
如果您使用 Controller As 语法，那么结果如下：
<div ng-controller="SampleController as ctrl">
<span ng-bind="ctrl.name"></span>
</div>
那么控制器将是这样的：
app.controller('ModalInstanceCtrl', function ($scope) {
var self = this;
self.name = "namegoeshere";
常见的用例是当您使用不同的控制器嵌套视图并且每个控件都有一个“$ scope.name”时，它们具有不同的值。哪一个属于哪个范围？当我试图绕过它时，我发现这篇博文很有用。
http://toddmotto.com/digging-into-angulars-controller-as-syntax/
答案 1 :(得分：0)
好的，主要有两个原因。
1）对Angular控制器定义的变化缺乏了解＆＃34; Controller As＆＃34;和（$范围VS这个）。 （文档仍然没有用自己推荐的方法显示示例＆＃34; Controller As＆＃34;）
2）模态实例控制器和模态html模板控制器之间的混淆，即模态控制器只是在$ uibModal.open（{...}）中定义的内容。在模态模板中不需要。
entry_history<div ng-controller="ModalDemoCtrl as modalScope">
..........
.....
<input type="text" class="form-control" ng-model="modalScope.projectname">
<div>
..........
.....
<input type="text" class="form-control" ng-model="modalScope.projectname">
..........
....
.
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'partials/new_project_modal.html',
controller: 'ModalInstanceCtrl',
scope: $scope,
resolve: {
projectName: function () {
return $scope.projectname;
}
}
});
};
.....
......
.......