Question

我有一种情况，我从控制器中的REST API获取一些数据，我使用ng-repeat渲染该数据。然后在该循环中，我需要运行另一个控制器，从早期控制器传递数据，对其执行一些操作，然后再次对其执行ng-repeat。

当我这样做时，＆＃34;检查元素＆＃34;显示保存在父控制器参数中的值。但是传递给嵌套控制器的值实际上是变量名。

源代码：

HTML：

<div class="checkbox" ng-repeat="bird in birds">
    <table>
        <tr>
            <td>
                <a ng-href="/birds/{{bird.Image}}" rel="shadowbox"><img ng-src="/birds/{{bird.Image}}" height="200" width="200"></img></a>
                <div ng-controller="imageController" model="{{ bird.AdditionalImages }}">More Images: {{ imageString }}
                    <div ng-repeat="image in images">
                        <a ng-href="/birds/{{image}}" rel="shadowbox[{{ bird.Image }}]">a</a>
                    </div>
                </div>
            </td>
            <td>
                 <table>
                     <tr>
                         <td>
                             <b>{{ bird.CommonName }}</b>
                         </td>
                     </tr>
                     <tr>
                         <td>
                             Spotted at: {{ bird.SpottedAt }}
                         </td>
                     </tr>
                 </table>
             </td>
         </tr>
    </table>
</div>

JavaScript（用于嵌套控制器）：

anekchidiya.controller('imageController', function($scope, $attrs) {
    $scope.imageString = $attrs.model;
    console.log("images: " + $scope.imageString);
});

Answer 1

您可以通过将范围传递到指令来执行此操作，然后创建隔离范围。

例如：

<强>控制器

(function(){

function Controller($scope) {

  $scope.data = [{
    name: 'john',
    age: '26'
  }, {
    name: 'paul',
    age: '24'
  }, {
    name: 'titi',
    age: '32'
  }];

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

<强>指令

(function(){

  function customDirective() {
      return{
        restrict: 'AE',
        template: '<h3>Age : {{age}}</h3>',
        scope: {
          age: '='
        }
      };
  }

angular
  .module('app')
  .directive('customDirective', customDirective);

})();

例如，您可以通过传递一些数据来将您的指令调用到ngRepeat：

<强> HTML

  <body ng-app="app" ng-controller="ctrl">

    <div ng-repeat="item in data">
      <h2>Name : {{item.name}}</h2>
      <custom-directive age="item.age"></custom-directive>
    </div>

 </body>

因此，隔离范围的典型用法是，它在一个指令中创建一个完整的组件，一个小部件等......

因此，您将能够构建一些自定义组件，并传递特定数据。

如何在Angular JS中的嵌套控制器中传递参数

1 个答案: