javascript - Angularjs - 范围的变化没有反射(reflect)出来

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

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