为什么这个 angular select 包装器指令不起作用?
Why doesn't this angular select wrapper directive work?
我正在尝试使用硬编码列表
制作一个环绕 select
的指令
var app = angular.module('dirApp',[]);
app.directive('dir', [function(){
return{
restrict: 'E',
template: "<select ng-options='x for x in vm.arr'></select>",
controllerAs: 'vm',
link: function(scope) {
scope.arr=["a", "b"];
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dirApp">
<dir></dir>
</div>
如您所见,出于某种原因,列表中没有填充值。我做错了什么?
您必须将数据放入 Controller,并向模板添加 ngModel。
指令
(function(){
function dir() {
return{
restrict: 'E',
template: "<select ng-model='vm.x' ng-options='x for x in vm.arr'></select>",
controllerAs: 'vm',
controller: function() {
var vm = this;
vm.arr = ["a", "b"];
vm.x = vm.arr[0]
}
};
}
angular
.module('app')
.directive('dir', dir);
})();
您忘记在 select 中指定 ng-model="currentValue"
;没有它,options 将不会初始化。
此外,如果您想使用 controllerAs:
引用它,您可能需要定义控制器
controller: function () {
this.arr = ["a", "b"];
},
或者您可以将数组直接放在指令的范围内。
这是您的指令的一些更新:
myApp.directive('dir', function () {
return {
restrict: 'E',
template: "<select ng-model='crrValue' ng-options='x for x in vm.arr'></select><div ng-repeat='item in arr'>{{item}}</div>",
controller: function () {
this.arr = ["a", "b"];
},
controllerAs: 'vm',
link: function (scope) {
scope.arr = ["c", "d"]
}
};
});
您会注意到 div 和 select 之间的区别。
希望这对大家有帮助!
我正在尝试使用硬编码列表
制作一个环绕select
的指令
var app = angular.module('dirApp',[]);
app.directive('dir', [function(){
return{
restrict: 'E',
template: "<select ng-options='x for x in vm.arr'></select>",
controllerAs: 'vm',
link: function(scope) {
scope.arr=["a", "b"];
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dirApp">
<dir></dir>
</div>
如您所见,出于某种原因,列表中没有填充值。我做错了什么?
您必须将数据放入 Controller,并向模板添加 ngModel。
指令
(function(){
function dir() {
return{
restrict: 'E',
template: "<select ng-model='vm.x' ng-options='x for x in vm.arr'></select>",
controllerAs: 'vm',
controller: function() {
var vm = this;
vm.arr = ["a", "b"];
vm.x = vm.arr[0]
}
};
}
angular
.module('app')
.directive('dir', dir);
})();
您忘记在 select 中指定 ng-model="currentValue"
;没有它,options 将不会初始化。
此外,如果您想使用 controllerAs:
controller: function () {
this.arr = ["a", "b"];
},
或者您可以将数组直接放在指令的范围内。 这是您的指令的一些更新:
myApp.directive('dir', function () {
return {
restrict: 'E',
template: "<select ng-model='crrValue' ng-options='x for x in vm.arr'></select><div ng-repeat='item in arr'>{{item}}</div>",
controller: function () {
this.arr = ["a", "b"];
},
controllerAs: 'vm',
link: function (scope) {
scope.arr = ["c", "d"]
}
};
});
您会注意到 div 和 select 之间的区别。
希望这对大家有帮助!