Aktivieren/Deaktivieren Text auf, klicken Sie auf die Grafik-Taste in AngularJS

Question

ich einen Kopftext und einen Bleistift Bild:

Hier ist der Code-Schnipsel:

'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 . Wie aktiviere ich den Kopftext (als Textfeld), wenn ich auf das Stiftbild klicke?

Q2. Wenn Sie mit der Maus aus dem Textfeld klicken, sollte es wieder in den Header-Text konvertiert werden und der bearbeitete Wert sollte in der Sitzung gespeichert werden.

Answer 1

Sie benötigen einen Zustand Ihrer Kopftext

$scope.editable = false;

Dann einen Eingang mit ng-show = "editierbar" erstellen und ng-Modell = "headingLineContent" hinzufügen möchten, fügen Sie dann ng-show = "! editierbare" zu Ihrem Header.

Hinzufügen-Klicken Sie auf Callback für ein Bleistift-Bild, und ändern Sie die editable dort. Wenn Sie eine Anforderung zum Speichern der Daten stellen müssen, können Sie dies auch tun.

Answer 2

können Sie diese Logik anwenden: In 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> 

In Controller: (Stellen Sie sicher, $ session in Ihrem Controller injizieren)

$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; 

}