我在我的 angularjs 网站上使用了 ddSlick 插件。该插件工作正常。但是选择该选项后,范围变量不会更新。在这个 link 中也是同样的问题.但答案对我不起作用。
$scope.ddData = []
for(var i in $scope.List){
var tempData = {}
tempData.text = $scope.List[i].name
tempData.value = $scope.List[i].slug
tempData.imageSrc = $scope.List[i].img + '.png'
if(i == 0)
tempData.selected = true
else
tempData.selected = false
$scope.ddData.push(tempData)
}
$('#Dropdown').ddslick({
data: $scope.ddData,
width: 350,
imagePosition: "left",
selectText: "Select a list",
onSelected: function (data) {
$scope.updateSelected(data);
$scope.$apply();
}
});
$scope.updateSelected = function(data){
$scope.Selected = data.selectedData.value
}
我必须遍历一个变量来获取下拉列表的 json 数据。有人可以帮忙吗?谢谢!
最佳答案
从 Controller 中进行 DOM 操作被认为是坏主意。
您需要使用指令将插件附加到特定的 DOM。通过创建指令,您可以通过指令链接函数很好地控制该 DOM,并且避免了 selector
特定代码。
为了使组件更紧凑和可重用,您可以在指令中使用隔离作用域,方法是在指令中添加 scope:{}
并在其中传递 data
和 onUpdate
(udpate on change) 在更新时调用。这样该组件将作为独立组件运行,您可以轻松地提供不同的数据。
标记
<div dd-slick dd-data="ddData" update-selected="updateSelected(selected)"></div>
指令
app.directive('ddSlick', function(){
return {
scope: {
ddData: '=',
updateSelected: '&'
}
link: function(scope, element, attrs){
// Watch scope.ddData and attach ddSlick behavior only when it is populated
scope.$watch('ddData', function(newValue, oldValue) {
// return if newValue is undefined or same as oldValue
if (!newValue || newValue === oldValue) return;
element.ddslick({
data: scope.ddData,
width: 350,
imagePosition: "left",
selectText: "Select a list",
onSelected: function (data) {
scope.updateSelected({selected: data});
scope.$apply();
}
}
});
};
})
关于javascript - Angularjs - 范围的变化没有反射(reflect)出来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32606578/