Angularjs -作用域的改变没有反映出来

Angularjs - change in scope not reflecting

本文关键字：作用域 改变 Angularjs      更新时间：2023-09-26

我使用ddSlick插件在我的angularjs网站。插件工作得很好。但是在选择了该选项之后，作用域变量没有更新。这个链接也是同样的问题。但是这个答案不适合我。

$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数据。有人能帮忙吗?谢谢!

从控制器进行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();
            }
        }
      });
    };
})
相关文章：