0

私はselect2処理で要素を作成することに取り組んでいました。select2 ドロップダウンの角度ディレクティブを作成しました。ただし、ディレクティブがレンダリングされた後に ng-model を変更すると、ビューは更新されません。

以下は、Jsfiddle の簡単な例のリンクです: http://jsfiddle.net/odiseo/zrchy7w0/5/

<div ng-app="miniapp" ng-controller="Ctrl">
<select ng-model="selectedOption" wb-select2 ng-options="k as v for (k, v) in optionList" select-width="300px"></select>
<button ng-click="changeModelOutside()">Click me</button>


var $scope;
var app = angular.module('miniapp', []);
app.directive('wbSelect2', function () {
return {
    restrict: 'A',
    scope: {
            'selectWidth': '@',
            'ngModel': '='
    },
    link: function (scope, element, attrs) {
        //Setting default values for attribute params
        scope.selectWidth = scope.selectWidth || 200;
        element.select2({
            width: scope.selectWidth,
        });
    }
};
});



function Ctrl($scope) {
$scope.optionList = {
    'key1': 'Option 1',
        'key2': 'Option 2',
        'key3': 'Option 3',
        'key4': 'Option 4'
};

$scope.selectedOption = 'key3';
$scope.changeModelOutside = function () {
    $scope.selectedOption = 'key4';

};
}

ちなみに、修正はディレクティブのリンク関数内のみを変更する必要があり、ディレクティブの外側の修正 ($('option').select2().select2('val','1')) を使用してみました)回避策にすぎません。

誰かが同じ問題を見つけて、これに対する解決策を持っていますか?

4

1 に答える 1

1

このjsfiddleを見ることができます。

http://jsfiddle.net/zrchy7w0/6/

<div ng-app="miniapp" ng-controller="Ctrl">
    <select ng-model="selectedOption" wb-select2 ng-options="k as v for (k, v) in optionList" select-width="350px" style="width:300px"></select>
    <button ng-click="changeModelOutside()">Click me</button>
</div>

var $scope;
var app = angular.module('miniapp', []);

app.directive('wbSelect2', function () {
    return {
        restrict: 'A',
        scope: {
            'selectWidth': '@',
            'ngModel': '='
        },
        link: function (scope, element, attrs) {
            //Setting default values for attribute params
            scope.selectWidth = scope.selectWidth || 200;
            element.select2({
                width: scope.selectWidth,
            });

            scope.$watch('ngModel', function(newValue, oldValue){
                element.select2().val(newValue);
            });
        }
    };
});



function Ctrl($scope) {
    $scope.optionList = {
        'key1': 'Option 1',
            'key2': 'Option 2',
            'key3': 'Option 3',
            'key4': 'Option 4'
    };

    $scope.selectedOption = 'key3';
    $scope.changeModelOutside = function () {
        $scope.selectedOption = 'key4';
    };
}
于 2015-05-13T21:29:20.423 に答える