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'、機能しなくなります。

changeこれは、Angular が既にイベントのハンドラーを持っているためだと思います。myChangeイベントを機能させるために何をする必要がありますか?

4

2 に答える 2

1

Angular のことを行うために、Angular の外部で両方の jQuery を使用しているため、この一連のソリューションにはまったく同意しません。

まず第一に - の $scope で必要なことはすべて行うことができます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 に答える