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

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
            });
     }
});

然后在您的控制器中,您可以设置$scope.someValue = true;按钮单击该按钮.

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

UPDATE

我已经进一步了解上述答案.我已经用你所追求的东西做了更多的事情.

以下是它的内容: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()