Angularjs - 范围变化不反映

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 操作被认为是一个坏主意。 您需要使用指令将插件附加到特定的 DOM。通过创建指令，您可以从指令链接函数中很好地控制该 DOM，并且避免了 selector 特定代码。

为了使其更紧凑和可重用的组件，您可以通过在指令中添加scope: {} 并在其中传递data 和onUpdate（更改时更新）来在指令中使用隔离范围以进行更新。这样该组件将作为独立的组件，您可以轻松地提供不同的数据。

标记

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