Call jQuery function inside AngularJS control

Question

For my AngularJS app I need to use a jQuery plugin http://www.wysibb.com.

This function I am trying to use $("#replyContents").bbcode(); should get the contents from the replyContents and give me the BBCode value.

What I am trying to do is inside my controller I set the scope as:

function controlForum($scope) {
    $scope.contents = $("#replyContents").bbcode();

    $scope.btnReply = function() {
        console.log($scope.contents);
    }
}

However that just returns null, nothing.

I have included jQuery because I can call $("#replyContents").wysibb(wbbOpt); outside the controller on the page which works.

How do I get the bbcode function to work inside my Angular function?

Answer 1

The better approach would be to use a text editor that is written as a native AngularJS directive(s). textAngular is quite good.

If you really must use a jQuery plugin, then you can use something like Angular UI Utils JQuery Passthrough or you can create your own directive.

Here's an example of using your own directive. To sync the contents of the editor with the ng-model applied to the textarea, you can require ngModel and then use the $setViewValue of the ngModel API to update the model based on some event. In this example, I update when a keyup event is fired inside the 'editor' div and when one of the buttons on the toolbar is clicked.

Obviously, if you want to use this editor to do something like upload image files, you'll have to add a different type of listener/handler.

angular.module('jqueryplugin.demo', ['wysibb']);

angular.module('jqueryplugin.demo')
.controller('MainCtrl', ['$scope', function($scope){
  $scope.logIt = function(val) {
    console.log(val);
  };
}]);

angular.module('wysibb', [])
.directive('wysibb', function(){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      var textarea, editor, buttons;
      var options = {
        buttons: 'bold,italic,underline'
      };
      textarea = element.wysibb(options);
      editor = element.next();
      buttons = element.parents('.wysibb').find('.wysibb-toolbar');
      editor.on('keyup', function(){
        scope.$apply(function(){
          ngModel.$setViewValue(editor.html());
        });
      });
      buttons.on('click', function(){
        scope.$apply(function(){
          ngModel.$setViewValue(editor.html());
        });
      });
    }
  };
});

@import url(//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css);
@import url(http://cdn.wysibb.com/css/default/wbbtheme.css);

textarea {
  min-height: 130px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.16/angular.js"></script>
<script src="http://cdn.wysibb.com/js/jquery.wysibb.min.js"></script>
<div ng-app="jqueryplugin.demo">
  <div ng-controller="MainCtrl">
    <textarea ng-model="text" wysibb></textarea>
    <pre>Output: <code>{{text}}</code></pre>
  </div>
</div>