Angularjs 如何显示依赖于指令状态的按钮_Angularjs

Angularjs 如何显示依赖于指令状态的按钮

angularjs

Angularjs 如何显示依赖于指令状态的按钮,angularjs,Angularjs,给定以下由元素数组组成的数据，每个元素都有一个标题和一个文本： [ { title: 'title1', text: 'text1' }, { title: 'title2', text: 'text2' } ] 数组的每个条目都应使用ng repeat显示为列表项。然而，为了使这些字段可编辑，每个项目都使用contenteditable 我正在使用指令使元素可编辑 app.directive("c

给定以下由元素数组组成的数据，每个元素都有一个标题和一个文本：

[
    {
        title: 'title1',
        text: 'text1'
    },
    {
        title: 'title2',
        text: 'text2'
    }
]

数组的每个条目都应使用ng repeat显示为列表项。然而，为了使这些字段可编辑，每个项目都使用contenteditable

我正在使用指令使元素可编辑

app.directive("contenteditable", function() {
  return {
    restrict: "A",
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {
      function read() {
        ngModel.$setViewValue(element.html());
      }

      ngModel.$render = function() {
        element.html(ngModel.$viewValue || "");
      };

      element.bind("blur keyup change", function() {
        scope.$apply(read);
      });
    }
  };
});

这是使用contenteditable指令的视图

<div ng-repeat = "entry in contentEditables.entries">
        <span contenteditable ng-model="entry.title"></span>
        <span contenteditable ng-model="entry.text"></span>
        <button ng-if="howToQueryIfOneOfTheContentEditablesHasBeenEdited?">save</button>
</div>


拯救

每行应有一个“保存”按钮，只有当该行的一个或两个contenteditable元素都已更改时，才会显示该按钮。我可以通过赋予contenteditable指令自己的作用域来跟踪它是否已更改，但是我无法找到仅当该行的元素已更改时才显示save按钮的方法

如何从视图中查询指令？有没有更好的方法来做这样的事情

Plunker可以在这里找到：

我最后编写了一个简单的控制器来处理这个问题：

app.controller('EditableController', ['$scope', function(scope) {

  var initial = {};
  angular.copy(scope.entry, initial);

  scope.edited = function(val) {
    return !angular.equals(val, initial);
  };

}]);

要初始化该控制器，请执行以下操作：

 <body>
    <div ng-controller="ContentEditableController as contentEditables">
      <div ng-repeat = "entry in contentEditables.entries" ng-controller="EditableController">
        <span contenteditable ng-model="entry.title"></span>
        <span contenteditable ng-model="entry.text"></span>
        <button ng-if="edited(entry)">save</button>
      </div>
    </div>
  </body>


拯救

Plunker可在此处找到：