AngularJS & Redactor Plugin

Question

그래서 AngularJS의 새 사이트에서 작업하고 있습니다.

그러나 문제가 발생했습니다. 내 텍스트 영역에 'Redactor'라는 jQuery 플러그인을 추가하려고하는데, 플러그인을 초기화 할 때 무슨 일이 일어나는 것 같아요, 텍스트 영역 요소를 대체합니다. 내가 픽업 초점 이벤트에 AngularJS와 UI를 사용하고

을하고 다음을 실행 내가 'NG 모델'과 같이, 텍스트 영역에 속성을 설정 때문에이 문제가 이유는 나는 시도하고 NG 모델 '응답'을 액세스 할 때, 그것은 정의되지 않은 올라 오기 때문에 텍스트

$scope.addRedactor = function() { 
     $('.redactor').redactor(); 
    }); 

의 초점에 따라 코드가 지금은, 텍스트 영역의 가치를 얻을 수없는 것.

Redactor의 영향을받은 후에 nag-model 속성을 텍스트 영역에 바인딩 할 수있는 방법이 있습니까? 그렇지 않으면 텍스트 영역의 가치를 얻는 또 다른 방법이 있습니까?

나는 지시를 오늘 같은 대답을 찾고되었다

Answer 1

그것을 해결하기 위해 :

<textarea ng-model="yourModel" redactor></textarea> 

모델 각각에 업데이트됩니다

angular.module('Module', []).directive("redactor", function() { 
    return { 
    require: '?ngModel', 
    link: function($scope, elem, attrs, controller) { 

     controller.$render = function() { 

     elem.redactor({ 
      keyupCallback: function() { 
      $scope.$apply(controller.$setViewValue(elem.getCode())); 
      }, 
      execCommandCallback: function() { 
      $scope.$apply(controller.$setViewValue(elem.getCode())); 
      } 
     }); 

     elem.setCode(controller.$viewValue); 
     }; 
    } 
    }; 
}); 

그런 다음 당신은 단지 다음과 같은 HTML을 사용할 수 있습니다 keyUp 및 사용자가 툴바에서 버튼을 클릭 할 때마다. 모델에 HTML 코드가 포함됩니다.

저는 AngularJS로 시작 했으므로 더 나은 방법이 있는지 또는 아직 깨지지 않은 규칙을 위반했는지 알려 주시기 바랍니다.

Answer 2

허용 된 답변이 내가 한 것처럼 작동하지 않는 사람을 찾습니다. 이것은 (각도 v1.1.5)와 함께 작업 한

angular.module('Module', []).directive("redactor", function() { 
     return { 
      require: '?ngModel', 
      link: function($scope, elem, attrs, controller) { 
       controller.$render = function() { 
        elem = $(elem); 
        elem.val(controller.$viewValue); 
        elem.redactor({ 

         changeCallback: function() { 
          $scope.$apply(controller.$setViewValue(elem.val())); 
         } 

        }); 

       }; 
      } 
     }; 
    }); 

changeCallback이 너무 훨씬 더 결합 다른 콜백보다 내 경우, 나는 JQuery와 요소에 ELEM 캐스팅해야합니다. 나는 또한 setCode와 getCode를 전혀 사용할 수 없다는 것을 발견했다. 다른 버전 일 수 있습니다.

Answer 3

사용이 "RedactorJS"에 대한 모듈을 AngularJS와 : https://github.com/TylerGarlick/angular-redactor

그것은 나를 위해 잘 일했다.