Question

这是我的主要HTML文件。

<div ng-controller="filterController">
    <div class="quick-view" id="quickview" data-toggle="modal" data-target="#modal-bar" 
                                  ng-click="quickView(quickview)"><i class="fa fa-eye">
                                                      </i><span>Quick View</span></div>
</div>

这是我的controller.js文件

angular.module('myApp',[]).controller('filterController', function($scope) {
    $scope.quickView = function quickView(id){  
        $.ajax({
            type: 'GET',
            url: 'assets/external/_modal.html',
            data: id,
            success: function (data) {
                // Create HTML element with loaded data   
                $('body').append(data); 
                console.log('body append');
            },
            error:function(jqXHR,textStatus,exception){console.log('Exception:'+exception);}
            });      
    }
    $scope.venue = "India";
}

这是_modal.html

<div ng-controller="filterController">
    <p>Hi. I live in {{venue}}</p>
</div>

如何将控制器范围传递到外部文件_modal.html，以便显示“我住在印度”，而不是“我住在{{场地}}”？

Answer 1

尝试angularjs方式。使用uib模态。 https://angular-ui.github.io/bootstrap

＆＃13;

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope,$uibModal, $log, $document) {
  $scope.animationsEnabled = true;
  $scope.Venue = "India"; // declare venue

  $scope.open = function (size, parentSelector) {
    var parentElem = parentSelector ? 
      angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      appendTo: parentElem,
      resolve: {
        values: function () {
          return $scope.Venue; //we are passing venue as values
        }
      }
    });

    modalInstance.result.then(function () {
      $scope.msg = "Submitted";
      $scope.suc = true; 
    }, function(error) {
      $scope.msg = 'Cancelled';
      $scope.suc = false; 
    });
  };
});


angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope,$uibModalInstance, values) { // inject that resolved values
 $scope.Venue= values; // we are getting & initialize venue from values
  $scope.ok = function () {
    $uibModalInstance.close('ok');
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

＆＃13;

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl" class="modal-demo">
    
   <br> 
<form name="form" novalidate>
 Type your venue :  <input type="text" style="width:200px" class="form-control" name="name" ng-model="Venue" required><br>
   <button type="button" ng-disabled="form.$invalid" class="btn btn-default" ng-click="form.$valid && open()">See Venue</button>
</form><br>
    <p ng-hide="!msg" class="alert" ng-class="{'alert-success':suc, 'alert-danger':!suc}">{{msg}}</p>
    
</div>
<script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">Your Details</h3>
        </div>
        <div class="modal-body" id="modal-body">
           
            <p>The venue is <b>{{Venue }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">Submit</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>
  </body>
</html>

＆＃13;

如何将控制器范围传递给部分html文件？

1 个答案: