Question

我有标题文字和铅笔图片：

以下是代码段：

＆＃13;

'use strict';
angular.module('myModule')
  .directive('heading', function (messageFormatterUtil, templateHelperService,cartService) {
	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);
		
		scope.view = {
                editableValue: scope.headingLineContent,
                editorEnabled: false
            };         
            scope.visible = true;
            scope.toggle = function() {
               scope.visible = scope.visible ? true : false;  
            };
			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'
    };
  });

＆＃13;

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

＆＃13;

Q1。单击铅笔图像时如何启用标题文本（作为文本字段）？

Q2。当单击鼠标移出文本字段时，它应该再次转换为标题文本，编辑后的值应保存在会话中。

Answer 1

您需要添加标题文字的状态

$scope.editable = false;

然后用ng-show =＆＃34; editable＆＃34;创建一个输入。和ng-model =＆＃34; headingLineContent＆＃34;，然后添加ng-show =＆＃34;！editable＆＃34;到你的标题。

为铅笔图片添加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;  

}

在Angularjs中单击图像按钮启用/禁用文本

2 个答案: