将数据从父范围绑定到角度树控件中节点中的元素的方法？

Posted 2023-03-06

【中文标题】将数据从父范围绑定到角度树控件中节点中的元素的方法？

【英文标题】：Way to bind data from parent scope to element in node in angular tree control?

【发布时间】：2015-07-16 01:34:01

【问题描述】：

正在向 angular-tree-control 添加拖放功能：https://github.com/wix/angular-tree-control

我正在尝试将来自父范围的数据绑定到我在模板中为每个节点创建的元素。但是，节点的隔离范围使得传递此信息变得困难。我通过隔离范围定义（范围：files：“=”）添加了一个属性，并在我的 html 中设置了文件。尽管如此，当我使用 ng-model="files" 时，数据并没有改变或改变没有达到主要范围。

不可能是我无法查看更改。当我从客户端更改主要（非隔离）范围数据时，来自另一个 Angular 应用程序 (ng-file-upload) 的监视触发器应该会关闭并调用上传文件函数，但这不会发生。如果数据从父范围正确绑定，则应触发监视功能，因为父范围属性应在本地范围属性更改时更改。如果这还不够，我可以添加进一步的解释或说明。

这是我的 HTML 代码：

<div treecontrol class="tree-classic"
     tree-model="dataForTheTree"
     files="files"
     options="treeOptions"
     on-selection="showSelected(node)"
     selected-node="node1">
    <span ngf-drop ngf-select ng-model="files" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"> 
 node.ObjectName &nbsp;&nbsp; node.FileSize files </span> 
</div>

这是我的 javascript：

$scope.getserver = function () 
    // Simple POST request example (passing data) :
    $http.post('/api/tree/download',  "Url": "" ).
      success(function (data, status, headers, config) 
          // this callback will be called asynchronously
          // when the response is available
          $scope.dataForTheTree = JSON.parse(JSON.stringify(data));
          $scope.log += JSON.stringify(data);
      ).
      error(function (data, status, headers, config) 
          $scope.log += "error getting file structure";
          // called asynchronously if an error occurs
          // or server returns response with an error status.
      );

$scope.$watch('files', function () 
    $scope.upload($scope.files);
);

$scope.upload = function (files) 
    // upload code goes here

这是我对 angular-tree-control.js 的编辑：

scope: 
                treeModel: "=",
                selectedNode: "=?",
                selectedNodes: "=?",
                expandedNodes: "=?",
                onSelection: "&",
                onNodeToggle: "&",
                options: "=?",
                orderBy: "@",
                reverseOrder: "@",
                filterExpression: "=?",
                filterComparator: "=?",
                done: "&",
                //this is my edit
                files: "="
            

【问题讨论】：

scope.$apply(function()scope.datafile = 'xxx');

感谢您的回复。如果您能告诉我这在我的项目中的位置以及原因，那就太好了。编辑了我的问题。

【参考方案1】：

我用一个简单的技巧成功了。您无需创建新属性即可将数据向下传递给指令。因此，文件不是必需的。只需将 html 中的 ng-model="files" 更改为 ng-model="$parent.files"。这是 ng-repeat 为每个节点创建隔离范围的问题，而不是 angular-tree-control.js（尽管该指令可能使用每个节点的范围而不是父节点）。