Angular：如何在选择上添加事件更改（jQuery-UI 组合框选择）？

Question

HTML：

<select style='width:60px;' combobox>
     <option ng-repeat='item in sizePriceWeighArr' value='{{ item.id }}' price='{{ item.price }}' weight='{{ item.weight }}' size='{{ item.size }}'>{{ item.size }}</option>
</select>

JS：

.controller('productController', ['$scope', '$location', '$http', '$q', '$window', '$stateParams', function($scope, $location, $http, $q, $window, $stateParams) {
    // Some code here to form array of products
    $scope.sizePriceWeighArr = productObj.sizePriceWeigh;
}])
.directive('combobox', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            $(element).combobox();                              
        }
    }
})

在指令中，我形成了一个 jQuery-UI 组合框选择。但我需要以某种方式在选择、控制器或指令中捕获更改事件。

Answer 1

你目前正在使用一个选择，所以为什么不直接使用 ngChange：

<select style='width:60px;' combobox ng-change="changeFunction()">
<option ng-repeat='item in sizePriceWeighArr' value='{{ item.id }}' 
price='{{ item.price }}' weight='{{ item.weight }}' size='{{ item.size }}'>    
{{ item.size }}</option>
</select>

js:

.controller('productController', ['$scope', '$location', '$http', '$q', '$window', '$stateParams', function($scope, $location, $http, $q, $window, $stateParams) {
// Some code here to form array of products
$scope.sizePriceWeighArr = productObj.sizePriceWeigh;

function changeFunction(){
    //your code.
}
}])
.directive('combobox', function() {
return {
    restrict: 'A',
    link: function($scope, element, attrs) {
        $(element).combobox();                              
    }
}
})