我有一个有角度的应用程序，我正在尝试根据用户的选择自动填充弹出模式。
我以为我可以使用我的模型服务来跟踪用户选择的内容并且＆＃39; wire＆＃39; <select>列表的控制器及其对模型的编辑按钮，但似乎不起作用。
使用angular-route增加了复杂性，我的<select>列表被隐藏在视图中。我试图将我的弹出模态保存在视图外的一个单独的控制器中，因为他们有自己的模板，当我将它们嵌入到视图中时我遇到了问题......
我已经看过一些连接角度应用程序的例子，并且认为我理解它们但是我无法弄清楚我做错了什么。
编辑（感谢Pankaj Parkar指出我在掠夺者的错误）：我有一个吸烟者：
https://plnkr.co/edit/6f9FZmV8Ul6LZDm9rcg9?p=preview
下面是带有CDN链接的单个HTML页面中的剪辑:)。
我是否完全误解了angularjs的工作方式？
<html ng-app="myApp">
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div ng-view></div>
<script id="editables.html" type="text/ng-template">
<div class="container">
<div class="jumbotron">
<form>
<div class="form-group">
<select class="form-control" id="mapsSelect" size="10" multiple ng-model="model.selected">
<option ng-repeat="n in editables">{{n}}</option>
<select>
</div>
<a href="#editModal" class = "btn btn-info" data-toggle="modal" ng-click="edit()" >Edit</a>
</form>
</div>
</div><!--end container div-->
</script>
<div ng-controller="modalsController">
<div id="editModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="name" ng-model="formModel.name"></input>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-3 control-label">Description</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="desc" ng-model="formModel.desc"></input>
</div>
</div>
<div class="modal-footer">
<pre> {{ formModel | json }}<br><br>Working: {{ workingMap }}</pre>
<a href="#" class="btn btn-primary pull-right" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-success fcvt-btn-save fcvt-btn-continue"">Continue</a>
</div>
</form>
</div>
</div>
</div><!-- end modal -->
</div>
</body>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src = "js/script.js"></script> -->
<script>
var app = angular.module('myApp', ['ngRoute']);
var modelService = function ($log){
var moduleHello = function(myMessage){
console.log("Module hellow from myService " + myMessage);
}
var moduleNames = {
"First" : {desc: "First's Description"},
"Second" : {desc: "Second's Description"},
"Third" : {desc: "Third's Description"}
};
var moduleWorkingName = {};
return {
hello: moduleHello,
editables: moduleNames,
workingName: moduleWorkingName
}
}//end modelService
app.factory("modelService", ["$log", modelService]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/editables', {
controller: "editablesController",
templateUrl: "editables.html"
}).
otherwise({
redirectTo: "/editables"
});
}]);
app.controller('editablesController', ['$scope', '$log','modelService', function($scope,$log, $modelService) {
$scope.model = {};
//console.log( JSON.stringify( $modelService.editables ) );
$scope.editables = [];
for ( name in $modelService.editables){
$scope.editables.push( name );
}
$scope.edit = function(){
if ( typeof $modelService.editables [$scope.model.selected] != 'undefined'){
$modelService.workingName = $modelService.editables [$scope.model.selected];
console.log ("Setting my working name to " + JSON.stringify( $modelService.workingName ) );
}else{
console.log ("Nothing Selected");
}
}
}]);
app.controller('modalsController', ['$scope','modelService', function($scope,$modelService) {
$scope.formModel = {};
$scope.formModel.name = "Hard coding works of course";
$scope.formModel.desc = $modelService.workingName.desc; //But I can't seem to get this to update. I thought pointing it at an object in the Model would be enough.
console.log("Firing up modalsController");
}]);
</script>
</html>
答案 0 :(得分：1)
我花了最后两天在脑海里考虑这个问题，我想我已经明白了。对于初学者来说，这是（工作）的傻瓜：
https://plnkr.co/edit/Kt3rebPtvGTt0WMXkQW4?p=preview
现在，解释。我试图保留一个单独的'formModel'对象来跟踪控制器的状态。但这既愚蠢也毫无意义。
相反，你应该做的是：
一个。在您的服务中创建一个对象来保存您的所有数据（我只是称之为'模型'）
湾对于需要共享数据的每个控制器，在控制器的$scope上创建一个变量，并将其指向您服务中的“模型”变量。
℃。之后，在你的html中使用模型中的变量。
所以在我的两个控制器中你都会找到这一行：
$scope.model = $modelService.model;
在我的HTML中你会找到这样的东西：
<input type="text" class="form-control" id="name" ng-model="model.workingName.name"></input>
注意我是如何使用“model.workingName.name”的？这引用了$scope.model.workingName.name，感谢我的JavaScript中的行$scope.model = $modelService.model现在直接指向我的模型。
这就是你如何“连接”Angular。
顺便说一句，经验丰富的Angular人可能已经注意到了这一部分：
$scope.editables = [];
for ( name in $modelService.model.names){
$scope.editables.push( name );
}
可能属于指令而不是控制器，因为我正在编辑DOM。
这就是为什么让AngularJS变得如此难以学习的东西。有很多概念可以解决这个问题。