3
Bu Thsi benim plunker benim kodAngularjs kullanarak tek bir modelde birden fazla şablon nasıl uygulanır?
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>geçerli: http://plnkr.co/edit/Gm9lFsGb099w6kCMQoVY?p=preview
modeli açılır (silme) için yukarıdaki kod kullanımı ui.bootstrap olarak, şimdi aynı kullanmak istiyorum Başka bir şablon görüntülemek için model açılır. Bu, çalışanların ve departmanların iki açılır ekran listesini gösterir. Önceki açılır pencerede sadece bilgi metnini sil ve templateUrl: - statik olarak delete.html sayfasını atayın. şimdi ben
Teşekkür ederiz @Pankaj, Bu iyi çalışıyor, Ama benim verilerim var troller bu pop-up model açılır penceresindeki açılır kapanışlara bağlanmadı –
Bu durumda yönerge direktifini ve açılır menü direktifini geçirmenizi öneriyorum. Bu yönergeyi –
direktifine aktaracağım İki sayfa var, ilk sayfa silme butonu ve ikinci sayfa ekle düğmesi içerir. ikinci denetleyicide çalışanların verileri bulunur ve hiç tıklandığında ekle düğmesiyle veri açılırken açılır. –