如何使用angularjs在一个模型中实现多个模板？

Question

这是我的代码

 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是我的傻瓜： http ：//plnkr.co/edit/Gm9lFsGb099w6kCMQoVY？p =preview

在上面的代码中使用ui.bootstrap进行模型弹出（删除），现在我想使用相同的模型弹出窗口来显示另一个模板。 这意味着我有两个下拉列表显示员工和部门。 在之前的弹出窗口中只显示删除信息文本和templateUrl： - 静态分配delete.html页面。 现在我想在AngularJs模型弹出窗口中为templateUrl分配动态路径

Answer 1

您可以从指令attribute传递模板名称，然后将其放在$modal.open的templateUrl选项上

<button template-path="abc.html" class="btn btn-small" type="button" 
  ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">
  Delete
</button>

然后在指令中

templateUrl: attrs.templatePath || 'ng-confirm-template',

在这里演示

如何使用angularjs在一个模型中实现多个模板？

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-03-24 09:40:31

如何使用angularjs在一个模型中实现多个模板？

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-03-24 09:40:31

解决方案1
3 已采纳 2016-03-24 09:40:31