AngularJs 组件和 angularjs-dropdown-multiselect

Question

我是 AngularJs 世界的新手，正在尝试在组件内部使用 angularjs-dropdown-multiselect。

组件的 HTML 看起来像：

<div>
  <select id="statusSelection" class="form-control"
          ng-options="status.name for status in $ctrl.statuses track by status.id"
          ng-model="$ctrl.status" ng-change="$ctrl.filterChanged()"></select>
</div>
<div ng-dropdown-multiselect="" options="$ctrl.categories" selected-model="$ctrl.category"
     events="$ctrl.events">
</div>

状态事件已更改，类别将调用相同的操作。

MultiselectController.prototype.filterChanged = function() {
        this.onFilterChange({
          status: this.status,
          category: this.category});
    };
MultiselectController.prototype.events = {
        onItemSelect: function(item) {
            filterChanged();
        },
        onItemDeselect: function(item) {
            filterChanged();
        }
    };

当我尝试运行上面的代码并更改状态时，代码按预期工作但在类别更改期间失败（控制台错误）。

错误信息: ReferenceError: filterChanged is not defined

Angular 版本: 1.5.8

angularjs-下拉多选: 1.11.8

笨蛋: http://plnkr.co/edit/JL7N6M?p=preview

感谢你在这里帮助我。

Answer 1

我创建了一个实例变量并将其初始化为 Controller 的实例。

var _instance;
function MultiselectController($scope) {
    this.statuses = testMultiselect.statuses;
    this.categories = testMultiselect.categories;
    this.$scope = $scope;
    this.setDefault();
    _instance = this;
}

现在，我正在使用这个实例变量来访问 Controller 上的函数。

MultiselectController.prototype.events = {
        onItemSelect: function(item) {
            _instance.filterChanged();
        },
        onItemDeselect: function(item) {
            _instance.filterChanged();
        }
    };

我对此并不完全满意，因为应该有更好的方法来做同样的事情，但在我找到之前，我会保留它。

更新的 Plunker：http://plnkr.co/edit/D7BKI9?p=preview

AngularJs 组件和 angularjs-dropdown-multiselect

AngularJs Component and angularjs-dropdown-multiselect

angularjs

ng-dropdown-multiselect

angular-components