Angularjs：使用变量事件的指令下拉列表中的param调用控制器方法

Question

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

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>"

    };
});

工作小提琴： http ： //jsfiddle.net/wXV6Z/98/

Answer 1

您使用错误的语法来调用方法绑定。

尝试：

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

DEMO

Answer 2

我做了这个，但另一个答案似乎更好：P

http://jsfiddle.net/wXV6Z/101/

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

function Ctrl($scope, $element){

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

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

}

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