Question

我找到了一个很好的解决方案，可以通过在模型上运行ng-repeat来创建角度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);
}

此处的目标是允许用户添加新记录，并在使用新行更新视图后自动触发内联编辑指令。如何以这种方式触发内联编辑指令？

Answer 1

我使用的一种技术是使用布尔值更改值，并在需要触发的指令中对其进行$watch。

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

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

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()

提交整个内容的虚拟代码

Answer 2

我有一个可能的解决方案：http://plnkr.co/edit/uzuKki（我正如你提到的那样处理原始的插件。）

我的想法是

将“editMode”属性添加到TODO模型
不是仅将todo.title传入指令的范围，而是传入整个TODO对象，即index.html中的inline-edit="todo"
在inline-edit.html中，将每editMode更改为model.editMode（并将model更改为model.title以正确显示标题。

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

var newTodo = {id:0, name:"TODO Name", editMode: true};
$scope.todos.unshift(newTodo);

如何在AngularJS中更新模型时触发指令？

2 个答案:

更新