12

我找到了一个很好的解决方案，可以通过在模型上运行 ng-repeat 创建 angular js 中的内联编辑内容：https ://stackoverflow.com/a/16739227/2228613

为了扩展该解决方案，我向具有 ng-click 指令的页面添加了一个按钮，如下所示：

<button ng-click="addCategory()" class="btn btn-large btn-primary" type="button">
<i class="icon-white icon-plus"></i> Add Category
</button>

addCategory 函数在我的控制器中定义：

$scope.addCategory = function(){
    var newCategory = {id:0, name:"Category Name"};
    $scope.categories.unshift(newCategory);
}

这里的目标是允许用户添加新记录并在视图使用新行更新后自动触发 inline-edit 指令。如何以这种方式触发 inline-edit 指令？

4

2 回答 2

19

我使用的一种技术是有一个布尔值更改值，并$watch在需要触发的指令内有一个。

myApp.directive('myDirective', function () {
    return function (scope, element, attr) {
            scope.$watch('someValue', function (val) {
                if (val)
                    // allow edit
                else
                    // hide edit
            });
     }
});

然后在您的控制器中，您将$scope.someValue = true;在 ng-click 中设置按钮。

plunker：http ://plnkr.co/edit/aK0HDY?p=preview

更新

我对上面的答案走得更远了。我做了一些更符合你所追求的东西。

这是它的关键：http ://plnkr.co/edit/y7iZpb?p=preview

这是新指令：

  .directive('editCar', function ($compile) {
      return {
        restrict: 'E',
        link: function (scope, element, attr) {
          var template = '<span class="car-edit">'+
          '<input type="text" ng-model="car.name" />' +
          '<button ng-click="someValue = false" class="btn btn-primary">Save</button></span>';
          scope.$watch('someValue', function (val) {
              if (val) {
                  $(element).html(template).show();
                  $compile($('.car-edit'))(scope);
              }
              else
                  $(element).hide();
          });
        }
      }
  })

它用<edit-car></edit-car>上面的模板替换元素。保存按钮将值添加到名为 的数组editedCars中。我留下了一些用于提交整个内容的虚拟代码$http.post()

于 2013-06-17T00:41:04.693 回答
0

我为您提供了一种可能的解决方案：http: //plnkr.co/edit/uzuKki（正如您所提到的，我在原始 plunk 上工作。）

我的想法是

  1. 将“editMode”属性添加到 TODO 模型
  2. 而不是只传入todo.title指令的范围，而是传入整个 TODO 对象，它inline-edit="todo"在 index.html 中
  3. 在 inline-edit.html 中，将 every 更改editMode为model.editMode（和 every modeltomodel.title以正确显示标题）

  4. 在您的控制器的add方法中，使用创建新对象editMode = true，例如

    var newTodo = {id:0, name:"TODO Name", editMode: true};
$scope.todos.unshift(newTodo);
于 2013-06-17T01:15:35.980 回答