angularjs - Angular JS - 在树内就地编辑

Question

我无法在树中进行就地编辑。 我 fork 了一个 fiddle ，其中就地编辑在一个简单的输入数据数组中工作

这是 fiddle

http://jsfiddle.net/cguy/wcMzw/8/

感谢您的帮助。

<script type="text/ng-template" id="tree_item_renderer.html">
    <button ng-click="expand_collapse(data)" ng-show="data.show && data.nodes.length > 0">-</button>
    <button ng-click="expand_collapse(data)" ng-show="!data.show && data.nodes.length > 0">+</button>
    <edit-in-place value="data.name"></edit-in-place>
 <ol ng-show="data.show">
    <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
</ol>
</script>

<div id="tree">

    <ol ng-controller="TreeCtrl" >
        <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
    </ol>   
</div>



var app = angular.module( 'myApp', [] );

app.directive( 'editInPlace', function() {
  return {
restrict: 'E',
scope: { value: '=' },
template: '<span ng-click="edit()" ng-bind="value"></span><input ng-model="value"></input>',
link: function ( $scope, element, attrs ) {
  // Let's get a reference to the input element, as we'll want to reference it.
  var inputElement = angular.element( element.children()[1] );

  // This directive should have a set class so we can style it.
  element.addClass( 'edit-in-place' );

  // Initially, we're not editing.
  $scope.editing = false;

  // ng-click handler to activate edit-in-place
  $scope.edit = function () {
    $scope.editing = true;

    // We control display through a class on the directive itself. See the CSS.
    element.addClass( 'active' );

    // And we must focus the element. 
    // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
    // we have to reference the first element in the array.
    inputElement[0].focus();
  };

  // When we leave the input, we're done editing.
  inputElement.prop( 'onblur', function() {
    $scope.editing = false;
    element.removeClass( 'active' );
  });
}
};
});

app.controller("TreeCtrl",['$scope', function($scope) {
$scope.expand_collapse = function(data) {
    data.show = !data.show;
}

// below is an array of size 1 - it does not have to be that way
$scope.tree = [ {
                name : "Root",
                show : true,
                nodes : []
            } ];

 var nodeChild1 = {
    name : "Child 1",
    show : false,
    nodes : []
};
 var nodeChild2 = {
    name : "Child 2",
    show : false,
    nodes : []
};
// Add the children
$scope.tree[0].nodes.push(nodeChild1);
$scope.tree[0].nodes.push(nodeChild2);

var nodeGrandChild1 = {
    name : "Grand Child 1",
    show : false,
    nodes : []
};
var nodeGrandChild11 = {
    name : "Grand Child 11",
    show : false,
    nodes : []
};
nodeChild1.nodes.push(nodeGrandChild1);
nodeChild1.nodes.push(nodeGrandChild11);

var nodeGrandChild2 = {
    name : "Grand Child 2",
    show : false,
    nodes : []
};
var nodeGrandChild21 = {
    name : "Grand Child 21",
    show : false,
    nodes : []
};
nodeChild2.nodes.push(nodeGrandChild2);
nodeChild2.nodes.push(nodeGrandChild21);

} ]);

Answer 1

我原来的 fiddle 里有一些额外的 Controller 标签。

现在可以使用了——这是更新后的 fiddle 。 http://jsfiddle.net/cguy/wcMzw/9/

<br />
<p>Here we repeat the contacts to ensure bindings work
</p>

<script type="text/ng-template" id="tree_item_renderer2.html">
    <button ng-click="expand_collapse(data)" ng-show="data.show && data.nodes.length > 0">-</button>
    <button ng-click="expand_collapse(data)" ng-show="!data.show && data.nodes.length > 0">+</button>
    {{data.name}}
 <ol ng-show="data.show">
    <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer2.html'"></li>
</ol>
</script>

<div id="tree2">

    <ol>
        <li ng-repeat="data in tree" ng-include="'tree_item_renderer2.html'"></li>
    </ol>   
</div>