3
これは私のコードangularjsを使用して1つのモデルで複数のテンプレートを実装する方法は？
var app = angular.module('drinks-app', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, Drink) {
'use strict';
Drink().then(function(drinks) {
$scope.drinks = drinks;
});
$scope.deleteItem = function(item) {
console.log("deleting item " + item.name);
};
});
app.factory('Drink', function($http) {
'use strict';
return function() {
return $http.get('drinks.json').then(function(response, status) {
return response.data;
});
};
});
app.directive('ngConfirm', function($modal, $parse) {
return {
// So the link function is run before ngClick's, which has priority 0
priority: -1,
link: function(scope, element, attrs) {
element.on('click', function(e) {
// Don't run ngClick's handler
e.stopImmediatePropagation();
$modal.open({
templateUrl: 'ng-delete-template',
controller: 'ngConfirmController',
resolve: {
message: function() {
return attrs.ngConfirm;
}
}
}).result.then(function() {
// Pass original click as '$event', just like ngClick
$parse(attrs.ngClick)(scope, {$event: e});
});
});
}
};
});
app.controller('ngConfirmController', function($scope, $modalInstance, message) {
$scope.message = message;
$scope.yes = function() {
$modalInstance.close();
};
$scope.no = function() {
$modalInstance.dismiss();
};
});<!DOCTYPE html>
<html ng-app="drinks-app">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>
<script type="text/ng-template" id="ng-delete-template">
<div class="modal-body">
<p>{{message}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-link pull-left" ng-click="no()">No</button>
<button class="btn btn-primary pull-right" ng-click="yes()">Yes</button>
</div>
</script>
<script type="text/ng-template" id="ng-add-template">
<div class="modal-body">
<select >
<option value="emp" >emplopyee</option>
</select>
</div>
<div class="modal-footer">
<button class="btn btn-link pull-left">ADD</button>
</div>
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<button class="btn btn-small" type="button" ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">Delete</button>
<button class="btn btn-small" type="button" ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">Add</button>
</div>
</body>
</html>Thsiは私plunkerです：モデルポップアップのための上記のコード使用ui.bootstrapでhttp://plnkr.co/edit/Gm9lFsGb099w6kCMQoVY?p=preview
（削除）、今私は、同じ使用したいです他のテンプレートを表示するためのモデルポップアップ。つまり、従業員と部門の2つのドロップダウンリストが表示されます。以前のポップアップ表示で情報テキストのみを削除し、templateUrl： - delete.htmlページを静的に割り当てます。今私は
ありがとうございます@Pankaj、それはうまくいきますが、私は私のデータからですその場合、モデルポップアップのドロップダウンにバインドされていないデータ –
その場合は、ディレクティブのスコープを分離し、ドロップダウンデータディレクティブを渡すように指示します。ディレクティブに渡します –
2ページあり、最初のページには削除ボタンがあります2番目のページには追加ボタンがあります。第2コントローラには従業員のデータが含まれています。追加ボタンをクリックすると、ポップアップにデータが表示されます –