x-editable을 사용하여 다른 요소를 클릭시 편집 가능하게 만듭니다

Question

x-editable dependency을 사용하여 원본 이미지 요소를 클릭 할 때 다른 요소를 편집 가능하게 만들고 싶습니다.

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

그리고 여기에 바이올린입니다 : 여기

<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입니다 http://jsfiddle.net/emporio/h1zsw5nu/4/

것은 그래서 기본적으로 내가 기본 요소를 클릭 할 때, 위의 텍스트를 편집 가능하게한다.

Answer 1

여기에서 "트리거 수동으로"기사 읽기 : http://vitalets.github.io/angular-xeditable/#text-btn

작업 바이올린 : 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> 

을