1
我有一個角度的應用程序，我正在嘗試根據用戶的選擇自動填充彈出模式。從模型角度佈線兩個控制器到自動填充表格
我想我可以使用我的模型服務來跟蹤用戶選擇和'連線'<select>列表的控制器，它是編輯按鈕的模型，但似乎並不奏效。
添加到複雜度我使用角度路線和我的<select>列表被埋在一個視圖。我試圖讓我的彈出模式在視圖外的單獨控制器中，因爲他們有自己的模板，當我將它們嵌入視圖時遇到問題...
我見過幾個例子接線角度的應用程序，並認爲我瞭解他們，但我無法弄清楚我做錯了什麼。
EDIT（感謝潘卡Parkar的指出我在plunker錯誤）：
我這裏有一個plunker：
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>
我還學到了另外一件事： 如果你有一個保存/取消按鈕的對話框/模式不要直接連接到你的模型（例如，不要在你的模型中使用你的模型的變量ng-model指令）。那時你需要一個'formSettings'對象。然後使用ng-click進行保存/取消操作，將其複製到模型中（或將表單重置爲模型中的當前內容）。 –