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