在角树控件中将数据从父作用域绑定到节点中的元素

Way to bind data from parent scope to element in node in angular tree control?

本文关键字:作用域 绑定 节点 元素 控件 数据      更新时间:2023-09-26

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

我试图将数据从父范围绑定到我在每个节点的模板中所做的元素。但是,节点的隔离作用域使得很难向下传递此信息。我通过隔离的作用域定义(scope: {files: "="})添加了一个属性,并在我的html中设置了文件。尽管如此,当我使用ng-model="files"时,数据不会改变,或者改变没有到达主作用域。

不可能是我看不到更改。当我从客户端更改主(而不是隔离的)作用域数据时,来自另一个angular应用程序(ng-file-upload)的watch触发器应该启动并调用上传文件函数,但这并没有发生。如果从父作用域正确地绑定了数据,则应该触发watch函数,因为当本地作用域属性发生变化时,父作用域属性也会发生变化。如果这还不够,我可以进一步解释或澄清。

下面是我的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: "="
            }

我用了一个简单的技巧就成功了。你不需要创建一个新属性来向下传递数据给指令。因此,文件是不必要的。只需将html中的ng-model="files"更改为ng-model="$parent.files"。ng-repeat为每个节点创建单独的作用域是有问题的,angular-tree-control.js则不是(尽管该指令可能会为每个节点而不是父节点使用作用域)。