Dav*_*ave 3 javascript angularjs angularjs-directive
我在尝试理解为什么双向数据绑定在我的自定义指令中不起作用时遇到了问题？
代码:
指令代码:
.directive('invoiceFilter', function () {
return {
restrict: 'E',
replace: true,
templateUrl: '_invoice-filter.tpl.html',
scope: {
selectedItem: '=',
selectedItemChange: '&'
},
link: function(scope) {
scope.items = {
all: 'Show all invoices',
draft: 'Show drafts only',
open: 'Show open invoices',
paid: 'Show paid invoices'
};
scope.raiseSelectedItemChange = function (key) {
alert('Selected item in directive: ' + key + " (which seems to work!)");
scope.selectedItem = key;
scope.selectedItemChange();
};
}
};
});
指令模板
<div class="btn-group dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
{{ items[selectedItem || 'open' ] }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="(key, value) in items">
<a href="javascript:void(0)" ng-click="raiseSelectedItemChange(key)">{{ value }}</a>
</li>
</ul>
</div>
正如您所看到的,我只是将一些数据添加到作用域(在链接函数中)并依赖于ng-repeat和ng-click的行为来在选择项目时引发事件/回调.警报正确显示所选项目.
但是当我开始使用这样的指令时:
HTML
<body ng-controller="MainController">
<h1>Hello Plunker!</h1>
<invoice-filter selected-item="filter" selected-item-change="filterChange()"></invoice-filter>
</body>
调节器
.controller('MainController', function($scope) {
$scope.filter = "all";
$scope.filterChange = function() {
alert("Selected item in controller: " + $scope.filter + " (does not work, databinding problem???)");
};
})
$ scope.filter值永远不会使用我在指令中选择的项进行更新,即使我在指令范围内指定了'=',我的理解应该启用双向数据绑定,对吧？
我在这里错过了什么？
普拉克操场
这是一个具有上述设置的plunkr,因此您可以验证它不起作用:o /
感谢任何能提供帮助的人!