2

我有一个简单的例子 - 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活动正常进行？

4

2 回答 2

1

我根本不同意这种解决方案，因为您在 Angular 之外同时涉及 jQuery 以执行 Angular 的事情。

首先 - 你可以在controller. 其次 - 你也可以在指令中解决这个问题 - 但如果你打算在 Angular 中编码，请使用 Angular 语法。

我已经更改了http://jsfiddle.net/m3DDK/1/中的 jsFiddle，因此您可以了解如何摆脱 jQuery 。（这是邪恶的；-）

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

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

你的html代码是这样的：

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

这可以进一步清理（如果您将使用 ng-repeat），但我将其留给您处理。

然后在您的指令中，我为 onChange 事件创建了一个可选的侦听器：

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');
        });
    }
};

});

总之 - 检查小提琴，并摆脱你的 jQuery。你不需要它，Angular 比这更强大。再加上一个大提示 -element在指令链接内已经是一个 jQuery 元素。

于 2013-09-04T13:27:29.733 回答
1

这是因为仅更改 的值select不会更新model，因此 select 指令会侦听change事件，并在发生事件时更新模型。

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

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');
});

要设置 的值select，请使用.val()

演示：小提琴

于 2013-09-04T12:32:07.177 回答