gpt4 book ai didi

javascript - 如何在 Angular JS 的嵌套 Controller 中传递参数

转载 作者:行者123 更新时间:2023-12-03 09:14:52 26 4
gpt4 key购买 nike

我遇到了一种情况,我从 Controller 中的 REST API 获取一些数据,然后使用 ng-repeat 渲染该数据。然后在该循​​环中,我需要运行另一个 Controller ,从之前的 Controller 传递数据,对其执行一些操作,然后再次对其运行 ng-repeat。

当我这样做时,“检查​​元素”显示父 Controller 参数中保存的值。但传递给嵌套 Controller 的值实际上是变量名称。

源代码:

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(用于嵌套 Controller ):

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

最佳答案

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

例如:

Controller

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

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

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

关于javascript - 如何在 Angular JS 的嵌套 Controller 中传递参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31983648/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com