Javascript 自定义事件绑定未正确运行$digest

我拿这把小提琴作为一个简单的例子-

HTML

1.
2.
3.
选项：{{selectOption}}
1.
2.
3.

按照当前的编写方式，如果单击任何

1

、

2

、

3

按钮，则会更新范围和所选值。如果您将最后一行代码触发的事件从

'change'

更改为

'myChange'

，则该事件不再有效

---

我想这是因为Angular已经有了

change

事件的处理程序。我需要做什么才能使

myChange

事件正常工作？

这是因为仅仅更改

select

的值不会更新

模型，select指令将侦听
change
事件，并在发生时更新模型

在您的情况下，我建议您触发指令中
myChange
处理程序内的
change
事件

app.directive('selectableOption', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attributes) {
            $(element).on('myChange', function () {
                element.trigger('change')
            });
        }
    };
});

$('button').on('click', function () {
    $('#mainSelect').val($(this).data('value'));
    $('#mainSelect').trigger('myChange');
});

要设置
选择的值，请使用

演示：
我完全不同意这种解决方案，因为您将jQuery和Angular都包含在Angular之外，以完成Angular的工作

首先-您可以在
控制器的$scope
中执行您想要的任何操作。第二，您也可以在指令中解决这个问题，但是如果您要使用Angular编码，请使用Angular语法

我在中更改了JSFIDLE，以便您可以看到如何摆脱jQuery。（这是邪恶的；-）

需要注意的两件事-您的控制器应如下所示：

$scope.setSelected = function (e) {
    e.preventDefault();
    e.stopPropagation();
    var valueNum = e.target.id.substr('btn'.length);
    $scope.selectOption = valueNum;
    $scope.$broadcast('myChange', valueNum);
};

        <div>
            <button ng-click="setSelected($event)" id="btn1">1</button>
            <button ng-click="setSelected($event)" id="btn2">2</button>
            <button ng-click="setSelected($event)" id="btn3">3</button>
        </div>

您可以使用如下html代码：

$scope.setSelected = function (e) {
    e.preventDefault();
    e.stopPropagation();
    var valueNum = e.target.id.substr('btn'.length);
    $scope.selectOption = valueNum;
    $scope.$broadcast('myChange', valueNum);
};

        <div>
            <button ng-click="setSelected($event)" id="btn1">1</button>
            <button ng-click="setSelected($event)" id="btn2">2</button>
            <button ng-click="setSelected($event)" id="btn3">3</button>
        </div>

}))

总之，检查一下小提琴，然后去掉jQuery。你不需要它，Angular比它更强大。
加上一个大提示-
元素
在指令链接中已经是jQuery元素了。
谢谢你的帮助，小提琴只是我问题的一个例子。我的项目比这个要大得多，并且与jQuery内部插件紧密结合，所以我不能对它做太多更改。
app.directive('selectableOption', function () {
return {
    restrict: 'A',
    link: function (scope, element, attributes) {
        scope.$on('myChange', function (event, valueNum) {
            //angular.element(element.children()[valueNum]).attr('selected', 'selected');
        });
    }
};