使用 x-editable 使不同的元素在点击时可编辑

Question

使用 x-editable dependency，我想在单击底层图像元素时使不同的元素可编辑。

<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
    <h3 class="m-t-lg m-b-sm inline-block" id="line{{lineId}}" editable-text="headingLineContent.someText">{{ headingLineContent }}</h3><br>
    <a href="" class="disabled"><i class="fa fa-pencil pencil m-l-sm" ng-click="">{{ myImage }}</i></a>
</div>

这是JS：

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope) {
  $scope.headingLineContent = 'Some Text';
  $scope.myImage = 'MyImage.jpg';
});

这里是 fiddle：http://jsfiddle.net/emporio/h1zsw5nu/4/

所以基本上当我点击底层元素时，上面的文本应该变成可编辑的。

Answer 1

从此处阅读 "Trigger Manually" 文章：http://vitalets.github.io/angular-xeditable/#text-btn

工作fiddle：http://jsfiddle.net/koljada/h1zsw5nu/5/

<div ng-app="app" ng-controller="Ctrl">
  <p>
    <h3 class="m-t-lg m-b-sm inline-block" id="line{{lineId}}" editable-text="headingLineContent" e-form="textBtnForm">{{ headingLineContent }}</h3>
  </p>
  <p>
    <a href="" class="disabled" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible"><i class="fa fa-pencil pencil m-l-sm" ng-click="">{{ myImage }}</i></a>
  </p>
</div>

使用 x-editable 使不同的元素在点击时可编辑

Use x-editable to make a different element editable on click

javascript

angularjs

x-editable