클릭하여 콘텐츠 편집 가능 div 추가

버튼 클릭시 콘텐츠 편집 가능한 div를 추가하고 싶습니다. 지금까지 온라인 자료에서 나는 그것에 대한 지침을 만들어야한다고 말한다. 나는 노력했다. 여기에 여기에클릭하여 콘텐츠 편집 가능 div 추가

app..directive("addEditableDiv", function($compile){ 
    return{ 
    restrict: 'A', 
    require: "ngModel", 
    link: function(scope , element){   
     element.bind("click", function(e){ 

     var childNode = $compile('<div ng-click="addDiv()" > here</div>')(scope) 
     element.parent().append(childNode); 

     }); 

     scope.addDiv = function(scope , element , attrs , ngModel){ 

       function read() { 
        ngModel.$setViewValue(element.html()); 
        ngModel.$render = function(){ 
        element.html(ngModel.$viewValue || ""); 
        }; 

        element.bind("click to write", function(){ 
        scope.$apply(read); 
        }) 

       } 
       } 
    } 
} 
})

출처

2017-11-06 TheTechGuy

를 작동하지 않는 다음 코드는 내용 편집 가능한 DIV위한 작업 코드가된다 (또한이 기능을 라이브러리를 사용할 수 있습니다)

var app = angular.module("MyApp", []) 
 
    .controller('Controller', function($scope) { 
 
    $scope.totalEditableDiv = []; 
 
    $scope.addDiv = function() { 
 
     $scope.totalEditableDiv.push($scope.totalEditableDiv.length); 
 
    } 
 
    $scope.addDiv(); 
 
    }) 
 
app.directive("contenteditable", function() { 
 
    return { 
 
    restrict: "A", 
 
    require: "ngModel", 
 
    link: function(scope, element, attrs, ngModel) { 
 

 
     function read() { 
 
     ngModel.$setViewValue(element.html()); 
 
     } 
 

 
     ngModel.$render = function() { 
 
     element.html(ngModel.$viewValue || ""); 
 
     }; 
 

 
     element.bind("blur keyup change", function() { 
 
     scope.$apply(read); 
 
     }); 
 
    } 
 
    }; 
 
});

[contenteditable] { 
 
    border: 2px dotted #ccc; 
 
    background-color: #eee; 
 
    padding: 2px; 
 
}

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

 
<body ng-app="MyApp"> 
 
    <div ng-controller="Controller"> 
 

 
    <div ng-repeat="editableDiv in totalEditableDiv"> 
 
     <div contenteditable ng-model="text[$index]"></div> 
 
     <br> 
 

 
     <b>Source of the Div:</b> 
 
     <p style="border:1px solid green;padding:15px;">{{text[$index]}}</p> 
 
    </div> 
 
    <button ng-click="addDiv()" style="color:blue">Add More</button> 
 
    </div> 
 
</body>

출처

2017-11-06 13:11:33

감사 , 나는 실제로 그것을 가지고있다. 필요한 것은 해당 내용을 편집 할 수있는 div를 추가하는 버튼을 누르는 것입니다. – TheTechGuy

@ICode 귀하의 요구 사항에 따라 답변을 업데이트했습니다. –

정말 고마워요. – TheTechGuy

클릭하여 콘텐츠 편집 가능 div 추가

답변

관련 문제