我正在努力创建一个带有 select2 处理的元素。我为 select2 下拉列表创建了一个 Angular Directive(指令)。但是,如果我在渲染指令后更改 ng-model, View 将不会更新。
以下是 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')) 只是一种解决方法。
有人发现同样的问题并有解决方案吗?
最佳答案
你可以看看这个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';
};
}
关于javascript - 更改 ng-model 后 Select2 View 不会更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30222487/