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

【问题标题】：How can I pass controller scope to a partial html file?如何将控制器范围传递给部分 html 文件？
【发布时间】：2017-10-18 00:02:48
【问题描述】：

这是我的主要 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，以便显示“我住在印度”而不是“我住在 {{venue}}”？

【问题讨论】：

你为什么这样工作？ jQuery的ajax，将dom元素附加到body？？ Angularjs在这里只是一个借口，这是palin jQuery
为什么是 $.ajax ？我们不需要 .. 像我的回答一样尝试。

标签： html angularjs ajax

【解决方案1】：

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

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');
  };
});

<!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>

【讨论】：

这是一个完美的答案（赞成），但我建议您包含更多关于您所做的事情的解释，也许还包括一个官方文档的链接，以帮助 OP 了解更多关于原生模式的信息
是的。 @AlonEitan
@manikandan-velayutham 如果我将 open 函数放入服务中，并将该服务注入控制器，我如何将控制器数据传递给“open”函数？我能够在服务中获取控制器数据，但我无法将该数据作为参数连同（大小、父选择器）一起传递给“打开”函数。
当我试图在 open 函数中显示该参数时，它给出了 undefined。
我没有足够的声望加入聊天。