2013-08-29 4 views
0

나는 Craig Stuntz's javascript contenteditable placeholder을 기반으로 한 자리 표시자를 사용하여 contenteditable 지시어를 사용합니다. DIV는 TextContent가있을 경우 숨기기 자리 다른 쇼 자리 div 텍스트를 angularjs 지시어로 전달

  • 을 존재하는 경우이 지침은 다음과 같은 작업을

    1. 검사를 수행하지만 이미 언급 한 문제가의 contentEditable 다음 자리를

    을 숨기기에 사용자 초점 크레이그 스턴트에 의해

    If you update the div text in JavaScript (instead of just typing into the div on the page), no events are fired, and you must let the plugin know that you've changed the contents by triggering the change event.

    는 어디서,981을 넣어 아무 생각이 없다그리고 javascript에서 div 텍스트가 비어 있거나 비어 있지 않은지 어떻게 알 수 있습니까?

    아래 코드

    app.directive("contenteditable", function() { 
    return { 
        require: 'ngModel', 
        link: function(scope, element, attrs, ctrl) { 
         // view -> model 
        element.bind('input', function() { 
        scope.$apply(function() { 
         ctrl.$setViewValue(element.text()); 
        }); 
    
        if (this.textContent) { 
          this.setAttribute('data-contenteditable-placeholder', 'true'); 
          console.log(this); 
         } else { 
         this.removeAttribute('data-contenteditable-placeholder'); 
         } 
        }); 
        // model -> view 
        //ctrl.$render = function() { 
        // element.text(ctrl.$viewValue); 
        //}; 
        //ctrl.$setViewValue(element.text()); 
        } 
    } 
    }); 
    

    CSS

    *[data-placeholder]:not(:focus):not([data-contenteditable-placeholder])::before { 
        content: attr(data-placeholder); 
        margin-left: 2px; 
        color: #b3b3b3; 
    } 
    
    div[contenteditable]:focus{ 
        outline: none; 
    } 
    
  • +0

    언제든지이 솔루션을 게시 할 수 있습니까? – chris

    답변

    1

    난 당신이 거의 믿고있다.

    .triggerHandler('change') 이벤트를 트리거 할 수 있도록 입력란의 값을 'watch'으로하면됩니다.

    지시어는 모델 변경 사항을 watch()해야하고 watch 콜백은 1이어야합니다. div가 비어 있는지 확인하고 2 - 트리거 이벤트 (또는 DOM 조작)를 호출하십시오. 아래에서 의사 코드를 볼 수 있습니다.

    scope.$watch('yourViewModel', function(newValue, oldValue) { 
    
    // here you check if the newValue is empty 
    
    // depending on the check above you call (or not) triggerHandler('change') 
    
    }); 
    
    당신은 scope.$watch의 두 번째 인수는 사업부 텍스트 인 경우 (따라서 검사 newValue이 비어있는 경우 해당 함수 내에서 테스트 할 수 있도록 newValue 및 모델의 oldValue를 수신하는 기능이라고 볼 수 있습니다

    빈).

    호프가 도움이되거나 적어도 올바른 방향으로 안내합니다.

    관련 문제