Question

我在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数据。有人可以帮忙吗？谢谢！

Answer 1

从控制器执行DOM操作被视为BAD想法。您需要使用指令将插件附加到特定DOM。通过创建指令，您可以从指令链接功能＆amp ;;中很好地控制该DOM。你避免使用selector特定代码。

要使其更紧凑和可重复使用的组件，您可以在指令中使用隔离范围，在您的指令中添加scope: {}，并在其内部传递data和onUpdate（更改时更改udpate）要求更新。因此，该组件将独立运行，您可以轻松地提供不同的数据。

<强>标记

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

Angularjs - 范围变化不反映

1 个答案: