Question

在我的另一篇文章之后，我正在尝试取得一些进展，但界面并不像我喜欢的那样顺畅。第一个问题是我必须双击双击才能双击。

其次，如何在编辑回控制器和模型后推送节点值？

实际上我有一个保存xhr json的服务，但是如何使用＆＃39; =＆＃39;来使用绑定节点的名称和范围？我不想使用html模板或指令标签。

由于

<script type="text/ng-template"  id="tree_item_renderer.html">
    <div toggle-attr >{{data.name}}</div>
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

    <ul ng-app="Application" ng-controller="TreeController">
        <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
    </ul>

    angular.module("myApp", []).
    controller("TreeController", ['$scope', function($scope) {
        $scope.delete = function(data) {
            data.nodes = [];
        };
        $scope.add = function(data) {
            var post = data.nodes.length + 1;
            var newName = data.name + '-' + post;
            data.nodes.push({name: newName, nodes:[] });

        };
        $scope.tree = [{name: "Node", nodes:[] }];


    }])
    .directive('toggleAttr',function() {
      return  {
        restrict:'A',
        scope:'=',

        link: function(scope, element, attrs) {

                element.bind("keydown", function(event){      

                    if(event.keyCode === 13) {

                        event.preventDefault();            
                        attrs.$set('contenteditable', false);

                        }; 

                });

                element.bind('dblclick', function() {
                        event.preventDefault(); 
                    attrs.$set('contenteditable', true);
                    element.focus();

                });

                element.bind("blur", function(event){
                attrs.$set('contenteditable', false);
                    });
            }
        };
     });

http://jsfiddle.net/tekin/4pzj9xxc/10/

Answer 1

在你的jsFiddle中，你省略了element.focus()行（如果你不使用jQuery但只使用Angular＆＃39; jqLite，你应该使用element[0].focus()）。

但是，您的指令实际工作的主要问题（实际更改数据，而不仅仅是显示的文本）是您需要将可编辑的div与ng-model连接起来。这是一个解决方案（改编自 Professional AngularJS 一书）：

<script type="text/ng-template" id="tree_item_renderer.html">
  <div toggle-attrs ng-model="data.name"></div>
  <button ng-click="add(data)">Add node</button>
  <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
  <ul>
    <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
  </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController">
  <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>
{{tree}}

和JS：

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.delete = function(data) {
      data.nodes = [];
    };
    $scope.add = function(data) {
      var post = data.nodes.length + 1;
      var newName = data.name + '-' + post;
      data.nodes.push({
        name: newName,
        nodes: []
      });
    };
    $scope.tree = [{
      name: "Node",
      nodes: []
    }];


  }])
  .directive('toggleAttrs', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
        name: '='
      },

      link: function(scope, element, attrs, ngModelCtrl) {
        if (!ngModelCtrl) return;

        ngModelCtrl.$render = function() {
          element.html(ngModelCtrl.$viewValue);
        }
        element.bind("keydown", function(event) {
          if (event.keyCode === 13) {
            event.preventDefault();
            attrs.$set('contenteditable', false);
          };
        });

        element.bind('dblclick', function(event) {
          attrs.$set('contenteditable', true);
          element[0].focus();
        });
        element.bind('blur', function() {
          attrs.$set('contenteditable', false);
        })

        element.bind("blur keyup change", function(event) {
          if (!attrs.contenteditable) return;
          scope.$apply(function() {
            ngModelCtrl.$setViewValue(element.html());
          });
        });
      }
    };
  });

我在tree之后输出<ul>值，以便在您进行编辑时查看模型的更改。

Here's a working jsFiddle

将节点名称推送到数据模型

1 个答案: