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

发布时间：2020-12-17 09:40:59 所属栏目：安全来源：网络整理

导读：我找到了一个很好的解决方案,用于通过在型号为 https://stackoverflow.com/a/16739227/2228613上运行ng-repeat创建的角度js中的内联编辑内容要扩展该解决方案,我添加了一个按钮到具有ng-click指令的页面： button ng-click="addCategory()" class="btn btn-

我找到了一个很好的解决方案,用于通过在型号为 https://stackoverflow.com/a/16739227/2228613上运行ng-repeat创建的角度js中的内联编辑内容

要扩展该解决方案,我添加了一个按钮到具有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);
}

这里的目标是允许用户添加新记录,并在视图更新为新行后自动触发内嵌编辑指令.如何以这种方式触发内联编辑指令？

我使用的一种技术是使用布尔值更改值,并在需要触发的指令内有一个$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点击按钮.

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,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>元素与上述模板.保存按钮将值添加到名为editingCars的数组中.我已经留下了一些虚拟代码,使用$http.post()提交整个事情,

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!