Angular JS - Inplace在树内编辑

Question

我无法在树中进行编辑工作。 我分叉的小提琴，其中就地编辑输入数据

的简单数组内的工作这里是小提琴

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

有我原来的小提琴一些额外的控制器标签。

现在，它的工作原理 - 这里是更新的小提琴。 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> 

Answer 2

对于您的演示第二棵树，你错过了指令

<edit-in-place value="data.name"></edit-in-place>