将数据传递给指令内部的 ng-repeat 指令
passing data to a directive for ng-repeat inside of the directive
当我想要一个显示事物列表的指令时,我一直在思考 angular,但我希望它足够通用以处理多个 type/shape 对象.对于简单的例子,假设我有
<select ng-options="person.id by person in people" ng-model="selectPerson">
<option>
{{person.name}}
</option>
</select>
(请记住,这是一个简单的示例,如此简单的内容可能不会从指令中获益)
现在我想把它变成一个通用指令,叫做 cool-select
我可能会尝试在我的 js
中做这样的事情
//directive coolselect.directive.js
angular.module('mycoolmodule',[]).directive('coolSelect',function(){
return {
restrict:'E',
templateUrl:'js/coolselectdirective/_coolselect.html',//html from example above
scope:{
items:'=',
displayProperty:'@',
idProperty:'@',
selectedItem:'='
},
link:function(scope,element){
//do cool stuff in here
}
}
});
但是这就是我开始在嘴里呕吐的地方
//html template _coolselect.html
<select ng-model="selectedItem" ng-options="item[scope.idProperty] by item in items">
<option>
{{item[scope.displayProperty]}}
</option>
</select>
老实说,我什至不确定这在 angular 中是否有效。我已经看到 ui-select 通过使用外部范围做了什么。也许这是要走的路?
https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L892
但后来我想我需要像 ui-select 那样喜欢 transclude。
有没有更简单的方法?我是否试图对通用指令进行指令?这不是其他人 运行 遇到的问题吗?
编辑:
最后像这样就很理想了。
<cool-select repeat="person.id by person in people" display-property="name"></cool-select>
请参阅下面的演示如何将每个对象从数组传递到 ng-repeater 中的指令
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.people = [{
name: "John"
}, {
name: "Ted"
}]
});
app.directive('user', function() {
return {
restrict: 'EA',
template: "<p>*name:{{user.name}}</p>",
scope: {
user: '='
},
link: function(scope, element, attr) {
console.log(scope.user);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<div ng-repeat="person in people" user="person"></div>
</div>
</div>
这里有几点需要注意:
- 通过将
ng-repeat
放在 select
上,您重复了 select
。
select
元素有一个用于重复选项的特殊属性,称为 ng-options
。
- 您无需参考模板中的
scope
,只需参考其属性即可。在 AngularJS 模板中隐含了 scope
,实际上这就是 scope
的目的,成为您正在访问的 "scope"内的属性。
- 您没有实例化
coolSelect
指令,因为您已将其限制为用作 元素 但您正试图将其用作 class.
- 如果您想在每次重复选项或其他组件时制定一个指令来简化此过程,您将需要使用类似
item[displayProperty]
的语法来使其成为 generic.
为什么你需要在选项标签中使用 displayProperty 自己构建选项 ng-options 可以做更多
<select
ng-model="myOption"
ng-options="value.id as value.label for value in myOptions">
<option value="">nothing selected Text</option>
</select>
value.id 是存储在 ngModel myOption 中的值
value.label是显示的标签
<option value="">nothing selected Text</option>
必要时没有选择任何选项
当我想要一个显示事物列表的指令时,我一直在思考 angular,但我希望它足够通用以处理多个 type/shape 对象.对于简单的例子,假设我有
<select ng-options="person.id by person in people" ng-model="selectPerson">
<option>
{{person.name}}
</option>
</select>
(请记住,这是一个简单的示例,如此简单的内容可能不会从指令中获益)
现在我想把它变成一个通用指令,叫做 cool-select 我可能会尝试在我的 js
中做这样的事情//directive coolselect.directive.js
angular.module('mycoolmodule',[]).directive('coolSelect',function(){
return {
restrict:'E',
templateUrl:'js/coolselectdirective/_coolselect.html',//html from example above
scope:{
items:'=',
displayProperty:'@',
idProperty:'@',
selectedItem:'='
},
link:function(scope,element){
//do cool stuff in here
}
}
});
但是这就是我开始在嘴里呕吐的地方
//html template _coolselect.html
<select ng-model="selectedItem" ng-options="item[scope.idProperty] by item in items">
<option>
{{item[scope.displayProperty]}}
</option>
</select>
老实说,我什至不确定这在 angular 中是否有效。我已经看到 ui-select 通过使用外部范围做了什么。也许这是要走的路? https://github.com/angular-ui/ui-select/blob/master/dist/select.js#L892
但后来我想我需要像 ui-select 那样喜欢 transclude。 有没有更简单的方法?我是否试图对通用指令进行指令?这不是其他人 运行 遇到的问题吗?
编辑: 最后像这样就很理想了。
<cool-select repeat="person.id by person in people" display-property="name"></cool-select>
请参阅下面的演示如何将每个对象从数组传递到 ng-repeater 中的指令
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.people = [{
name: "John"
}, {
name: "Ted"
}]
});
app.directive('user', function() {
return {
restrict: 'EA',
template: "<p>*name:{{user.name}}</p>",
scope: {
user: '='
},
link: function(scope, element, attr) {
console.log(scope.user);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<div ng-repeat="person in people" user="person"></div>
</div>
</div>
这里有几点需要注意:
- 通过将
ng-repeat
放在select
上,您重复了select
。 select
元素有一个用于重复选项的特殊属性,称为ng-options
。- 您无需参考模板中的
scope
,只需参考其属性即可。在 AngularJS 模板中隐含了scope
,实际上这就是scope
的目的,成为您正在访问的 "scope"内的属性。 - 您没有实例化
coolSelect
指令,因为您已将其限制为用作 元素 但您正试图将其用作 class. - 如果您想在每次重复选项或其他组件时制定一个指令来简化此过程,您将需要使用类似
item[displayProperty]
的语法来使其成为 generic.
为什么你需要在选项标签中使用 displayProperty 自己构建选项 ng-options 可以做更多
<select
ng-model="myOption"
ng-options="value.id as value.label for value in myOptions">
<option value="">nothing selected Text</option>
</select>
value.id 是存储在 ngModel myOption 中的值 value.label是显示的标签
<option value="">nothing selected Text</option>
必要时没有选择任何选项