javascript - Angularjs:在更改事件上使用指令下拉列表中的参数调用 Controller 方法

Question

我做了一个下拉指令。从下拉列表中选择一个值时，将调用 Controller 中的方法并传递所选的过滤器。一切工作正常，除了该方法始终返回默认选择的值，无论选择什么。

html:

<div ng-controller="Ctrl">
    <div>
          <dropdown filters="filters" filter="filter" select="selectFilter(filter)"></dropdown>
    </div>
</div>

JavaScript:

var app = angular.module('app', []);

function Ctrl($scope){

    $scope.filters = [
       { Id: 1, Name: "All" }, { Id: 2, Name: "filter1" }, { Id: 3, Name: "filter2" }, { Id: 4, Name: "filter3"}
    ];

    $scope.filter = $scope.filters[0];

    $scope.selectFilter = function(selectedFilter){
      alert(selectedFilter.Name);  
    };
}

app.directive('dropdown', function(){
    return {
        restrict: "E",
        scope: {
            filter: "=",
            filters: "=",
            select: "&"
        },
        template: "<select ng-model=\"filter\" ng-change=\"select(filter)\" ng-options=\"f.Name for f in filters\"></select>"

    };
});

工作 fiddle :http://jsfiddle.net/wXV6Z/98/

Answer 1

您使用了错误的语法来调用方法绑定(bind)。

尝试:

ng-change=\"select({filter:filter})\

DEMO