啓用圖像按鈕上點擊/禁用文本Angularjs

Question

我有一個標題文字和一支鉛筆的圖像：

這裏是代碼片段：

'use strict'; 
 
angular.module('myModule') 
 
    .directive('heading', function (messageFormatterUtil, templateHelperService,cartService) { 
 
\t return { 
 
     restrict: 'E', 
 
     
 
    
 
     link: function(scope, elem, attrs)   
 
     scope.lineId = cartService.allLines[scope.$parent.$index].id; 
 
     scope.headingLineContent = templateHelperService.getComponentData(attrs.data).heading; 
 
     var title=scope.headingLineContent.title; 
 
     scope.headingLineContent = messageFormatterUtil.formatMessage 
 
            (title,[scope.$parent.$index + 1]); 
 
     
 
     scope.$watch('$parent.$index', function() { 
 
      scope.lineId = cartService.allLines[scope.$parent.$index].id; 
 
      scope.headingLineContent = messageFormatterUtil.formatMessage 
 
            (title,[scope.$parent.$index + 1]); 
 
     }, true); 
 
\t \t 
 
\t \t scope.view = { 
 
       editableValue: scope.headingLineContent, 
 
       editorEnabled: false 
 
      };   
 
      scope.visible = true; 
 
      scope.toggle = function() { 
 
       scope.visible = scope.visible ? true : false; 
 
      }; 
 
\t \t \t scope.Open=function() { 
 
       scope.view.editorEnabled = true; 
 
       scope.view.editableValue = scope.headingLineContent; 
 
       var myEl = angular.element(document.querySelector('#line'+scope.lineId)); 
 
       myEl.attr('title',"true"); 
 
      }; 
 
      scope.disableEditor = function() { 
 
       scope.view.editorEnabled = false; 
 
      }; 
 
      scope.save = function() { 
 
       scope.headingLineContent = scope.view.editableValue;    
 
      }; 
 
     }, 
 
     templateUrl: './app-modules/cart/views/heading.html' 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<span ng-hide="visible" ng-show="show" ng-mouseout="!show" class="m-t-lg m-b-sm inline-block ng-binding"> 
 
<input type="text" id="from" /> 
 
</span> 
 
<h3 class="m-t-lg m-b-sm inline-block " id="line{{lineId}}" ng-show="!show">{{headingLineContent}}</h3> 
 
<a href="" class="enabled" id="pencilID" ng-click="show = !show"><i class="fa fa-pencil pencil m-l-sm" ng-click="open()" ng-mousedown="save()"></i></a>

Q1 。如何在點擊鉛筆圖像時啓用標題文本（作爲文本字段）？ Q2302。當單擊鼠標移出文本字段時，它應該再次轉換爲標題文本，編輯後的值應保存在會話中。

Answer 1

您需要添加標題文字的狀態

$scope.editable = false;

然後創建NG秀= 「編輯」 和NG-模型= 「headingLineContent」 的輸入，再加入NG-秀= 「！editable」添加到您的標題。

爲鉛筆圖像添加ng-click回調，並在那裏更改editable。如果您需要提出保存數據的請求，您也可以在那裏進行。

Answer 2

你可以把這個邏輯： 在HTML：

<pencil-icon data-ng-click="editHeader()"></pencil-icon> 

header text: <input type="text" ng-mouseleave="save()" data-ng-show="editEnable" ng-model="headerText"/> 
      <span data-ng-show="!editEnable">{{headerText}}</span> 

在控制器（請確保您在您的控制器注入$的sessionStorage）

$scope.headerText = "Sample header text"; 

$scope.editEnable = false; 

$scope.editHeader = function(){ 

    $scope.editEnable = !$scope.editEnable 

}; 

$scope.save = function(){ 

    $sessionStorage.headerText = $scope.headerText; 

    $scope.editEnable = false; 

}