Angularjs - изменение объема не отражает

Question

Я использую плагин ddSlick на моем сайте angularjs. Плагин отлично работает. Но после выбора опции переменная области не обновляется. Это та же проблема в этом 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. Создав директиву, у вас есть хороший контроль над этим DOM из функции директивной ссылки &, вы избегали определенного кода selector.

Чтобы сделать его более компактным и многоразовый компонент можно использовать изолированную сферу вашей директивы, добавив scope: {} в своей директиве, так и внутри, что передать data и onUpdate (udpate об изменении) будут звонить на обновлениях. Таким образом, этот компонент будет действовать как независимый, и вы можете легко предоставить разные данные.

Markup

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