如何更新在AngularJS模型时触发的指令？ [英] How to trigger a directive when updating a model in AngularJS?

问题描述

我发现在由模型上运行的NG-重复创建角的js内联编辑内容的一个好办法：<一href=\"http://stackoverflow.com/a/16739227/2228613\">http://stackoverflow.com/a/16739227/2228613

I found a good solution for inline editing content in angular js that is created by running ng-repeat on a model: http://stackoverflow.com/a/16739227/2228613

要扩大这种解决方案我添加了一个按钮，具有NG-点击指令，因为这样的页面：

To expand on that solution I added a button to the page that has a ng-click directive as so:

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

该addCategory功能在我的控制器定义的：

The addCategory function is defined in my controller:

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

这里的目的是允许用户添加新的记录，并且一旦视图与新行更新自动触发直列编辑指令。我怎样才能触发内嵌编辑指令以这样的方式？

The goal here is to allow the user to add a new record and automatically trigger the inline-edit directive once the view is updated with the new row. How can I trigger the inline-edit directive in such a manner?

推荐答案

这是我使用的一种技术是有一个布尔变化值，有一个 $观看上它需要被触发的指令内。

One technique that i've used is to have a boolean change values and have a $watch on it inside the directive that needs to be triggered.

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-点击按钮

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

我已经有点进一步与上面的回答。我做的东西沿着线条更与你追求的。

I've gone a bit further with the above answer. I've made something more along the lines with what you're after.

下面是它的普拉克：<一href=\"http://plnkr.co/edit/y7iZpb?p=$p$pview\">http://plnkr.co/edit/y7iZpb?p=$p$pview

这是新的指令：

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

它取代了＆LT;编辑汽车＆GT;＆LT; /编辑汽车＆GT; 通过上面的模板元素。保存按钮添加值名为 editedCars 的数组。我留在一些虚拟code使用提交整个事情 $ http.post（）

It replaces the <edit-car></edit-car> element with the above template. The save button adds the values to an array called editedCars. I've left in some dummy code for submitting the entire thing using $http.post()

这篇关于如何更新在AngularJS模型时触发的指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！