Question

我正在尝试创建一个单一模态，用于从AngularJS中的ng-repeat（work in workList）中提取动态数据。换句话说，当我只能将动态内容添加到一个模态时，模式不会存在于ng-repeat中，以防止生成多个模态。以下是我的观点：

<div ng-controller="mainController">
   <div ng-repeat="work in workList"
   //some other code here...
   <div ng-controller="modalController">
      <button ng-click="open_modal(work)" data-toggle="modal" data-target="#myModal">
   </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <h2>
   {{ timechosen.data.name }}
   </h2>
</div>
</div>

这是我的modalController：

angular
  .module('testApp')
  .controller('modalController', ['$scope', function($scope) {
    $scope.open_modal = function(time_chosen) {
      $scope.timechosen = time_chosen.data;
    }
  }])

在我的模式中，{{ timechosen.data.name }}没有显示任何内容，而且我非常确定它是嵌套范围问题，因为当我在$scope.timechosen中设置mainController时，它似乎工作正常。但是，我确实需要在modalController中设置$scope.timechosen，但似乎无法找到解决可能的嵌套范围问题的方法。有什么想法吗？

Answer 1

您是否考虑过将所有内容放在一个控制器中？像这样：

＆＃13;

angular
  .module('app', [])
  .controller('TestController', function($scope) {
    $scope.items = [
      {
        label: 'Item 1',
        body: 'This is the body of item 1',
        title: 'This is number 1'
      },
      {
        label: 'Item 2',
        body: 'This is the body of item 2',
        title: 'This is number 2'
      },
      {
        label: 'Item 3',
        body: 'This is the body of item 3',
        title: 'This is number 3'
      }
    ]
  
    $scope.changeModalInfo = function(info) {
      $scope.info = info;
    }
  });

＆＃13;

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css";

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="app">

  <div ng-controller="TestController as ctrl">
    <ul>
      <li ng-repeat="item in items">
        <button data-toggle="modal" data-target="#myModal"
        ng-click="changeModalInfo(item)">
      {{item.label}}
    </button>
      </li>
    </ul>
    
    <div class="modal fade"
      id="myModal" 
      tabindex="-1" 
      role="dialog" 
      aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">{{info.title}}</h4>
      </div>
      <div class="modal-body">
        <p>{{info.body}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div>
  </div>
  </div>

</body>
</html>

＆＃13;

如果您需要分成多个控制器，可以使用服务或$ rootScope（不建议）。

＆＃13;

angular
  .module('app', [])
  .controller('ModalController', function($scope, ModalService) {
    $scope.modal = ModalService;
  })
  .controller('TestController', function($scope, ModalService) {
    $scope.items = [
      {
        label: 'Item 1',
        body: 'This is the body of item 1',
        title: 'This is number 1'
      },
      {
        label: 'Item 2',
        body: 'This is the body of item 2',
        title: 'This is number 2'
      },
      {
        label: 'Item 3',
        body: 'This is the body of item 3',
        title: 'This is number 3'
      }
    ]
  
    $scope.changeModalInfo = function(info) {
      ModalService.info = info;
    }
  })
  .service('ModalService', function() {
    return {};
  });

＆＃13;

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css";

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="app">

  <div ng-controller="TestController as ctrl">
    <ul>
      <li ng-repeat="item in items">
        <button data-toggle="modal" data-target="#myModal"
        ng-click="changeModalInfo(item)">
      {{item.label}}
    </button>
      </li>
    </ul>
  </div>
  
  <div class="modal fade"
      id="myModal" 
      tabindex="-1" 
      role="dialog" 
      aria-labelledby="myModalLabel"
      ng-controller="ModalController as ctrl">
     <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">{{modal.info.title}}</h4>
      </div>
      <div class="modal-body">
        <p>{{modal.info.body}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div>
  </div>

</body>
</html>

＆＃13;

单一模式从ng-repeat内部提取数据

1 个答案: