我有一个简单的例子 - http://jsfiddle.net/E7crq/4/
var app = angular.module('myapp', []);
app.controller('TestController', function($scope) {
$scope.selectOption = 1;
});
app.directive('selectableOption', function () {
return {
restrict: 'A',
link: function (scope, element, attributes) {
$(element[0]).on('myChange', function() {
scope.$digest();
});
$(element[0]).on('change', function() {
scope.$digest();
});
}
};
});
$('button').on('click', function() {
$('#mainSelect option[value=' + $(this).attr('data-value') + ']').attr('selected', 'selected');
$('#mainSelect').trigger('change');
});
HTML
<div ng-app="myapp">
<div ng-controller="TestController">
<select ng-model="selectOption" id="mainSelect" selectable-option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div>
Option: {{ selectOption }}
<div>
<button data-value="1" id="btn1">1</button>
<button data-value="2" id="btn2">2</button>
<button data-value="3" id="btn3">3</button>
</div>
</div>
它当前的编写方式,如果您单击任何1
、2
、3
按钮,它会更新范围和选定的值。如果您将最后一行代码触发的事件从'change'
更改为'myChange'
,则它不再起作用。
我猜那是因为 Angular 已经有一个change
事件处理程序。我需要做什么才能使myChange
活动正常进行?