如何使用 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>

这是我的傻逼：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',

Demo Here

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

How to implement multiple templates in one model using angularjs?

javascript

angularjs

angularjs-directive

angular-ui

ui.bootstrap