为什么我的指令的选择没有绑定到控制器? [英] Why isn't my directive's selection being bound to the controller?
问题描述
我正在使用一个非常简单的指令 - 它是一个围绕下拉列表的小包装器.我想从中公开一个属性selectedOption"(好吧,selected-option),我可以双向绑定到控制器.我已经在指令的范围内设置了属性(并将其设置为 = 我认为这将允许双向绑定),然后在主控制器上公开一个属性.
我附上了一个例子.我原以为显示的默认项目是Beta".如果我将选择更改为 Alpha,则控制器值将更新为A".但这并没有发生 - 即使我已经指定该属性应该对控制器可用,它们似乎是孤立的.
我在这里遗漏了什么神奇的代码?
angular.module('app', []);angular.module('app').controller('test', function(){var vm = 这个;vm.inv = 'B';vm.displayInv = 函数 () {alert('inv:' + vm.inv);};});angular.module('app').directive('库存测试', 函数 () {返回 {限制:'E',模板:'<select ng-model="ctrl.selectedOption" ng-options="inv.code as inv.desc for inv in ctrl.invTypes"></select>{{ctrl.sample}}.已选择:{{ctrl.selectedOption}}',范围:{selectedOption:'='},控制器:函数(){this.invTypes = [{代码:'A',描述:'阿尔法'},{代码:'B',描述:'Bravo'},{代码:'C',描述:'查理'},];this.sample = '你好';},控制器为:'ctrl'}});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script><div ng-app="app" ng-controller="test as vm"><inventorytest selected-option='vm.inv'></inventorytest><button ng-click="vm.displayInv()">显示</button><br/>控制器:{{vm.inv}}
默认情况下,Angular 创建一个 scope
对象(最常使用变量 $scope
引用)对于每个 HTML 模板.
代码中的 scope: { selectedOption: '='},
实际上是为指令创建一个 isolated 作用域,并使 selectedOption
> 该 scope
对象上的一个属性.
行 controllerAs: 'ctrl'
正在此相同的 scope
对象上创建一个属性,该对象指向控制器对象.
这实际上意味着在控制器中,您可以技术上访问ctrl.$parent.selectedOption
,这将返回selectedOption
ctrl
对象的父对象,即 scope
.然而,在实践中,这非常麻烦.
在 Angular 1.3 中,添加了一个新选项,bindToController : true
.此选项自动将 scope:
定义中的属性绑定到 controllerAs:
对象而不是 scope
本身.
I've got a very simple directive I'm working with - it's a small wrapper around a dropdown. I want to expose an attribute, "selectedOption" (well, selected-option) from it that I can two-way bind to the controller. I've set the property in the scope of the directive (and set it to = which I thought would allow the two-way binding), then exposed a property on the main controller.
I've attached an example. I would have expected that the default item shown would be "Beta". And if I changed selections to Alpha, the Controller value would be updated to "A". But that doesn't happen - they appear to be isolated even though I've specified that this property should be available to the controller.
What magic bit of code am I missing here?
angular
.module('app', []);
angular.module('app').controller('test', function(){
var vm = this;
vm.inv = 'B';
vm.displayInv = function () {
alert('inv:' + vm.inv);
};
});
angular.module('app')
.directive('inventorytest', function () {
return {
restrict: 'E',
template: '<select ng-model="ctrl.selectedOption" ng-options="inv.code as inv.desc for inv in ctrl.invTypes"></select>{{ctrl.sample}}. Selected: {{ctrl.selectedOption}}',
scope: { selectedOption: '='},
controller: function () {
this.invTypes = [
{ code: 'A', desc: 'Alpha' },
{ code: 'B', desc: 'Bravo' },
{ code: 'C', desc: 'Charlie' },
];
this.sample = 'Hello';
},
controllerAs: 'ctrl'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="test as vm">
<inventorytest selected-option='vm.inv'></inventorytest>
<button ng-click="vm.displayInv()">Display</button>
<br/>
Controller: {{vm.inv}}
</div>
By default, Angular creates a scope
object (most commonly referred to with the variable $scope
) for each HTML Template.
The scope: { selectedOption: '='},
in your code is actually creating an isolated scope for the directive, and making selectedOption
a property on that scope
object.
The line controllerAs: 'ctrl'
is creating a property on this same scope
object which points to the controller object.
This actually means that in the controller, you could technically access ctrl.$parent.selectedOption
, which would return the selectedOption
property of the ctrl
object's parent, which is scope
. In practice, however, this is very cumbersome.
In Angular 1.3, a new option was added, bindToController : true
. This option automatically binds the properties from the scope:
definition to the controllerAs:
object instead of scope
itself.
这篇关于为什么我的指令的选择没有绑定到控制器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!