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?

I've just discovered it works if I don't apply it to a scope but I kind of need to assign it to the scope. — Jayden
– Jayden, Commented Jun 28, 2015 at 10:42
Check if $ is jQuery in that context and if $("#replyContents") is available while invoking that code. You can defer using your plugin with construct like this: `setTimeout(function(){ $("#replyContents").bbcode(); }, 50); — Ryszard Fiński
– Ryszard Fiński, Commented Jun 28, 2015 at 11:21
It's always helpful if you can provide the rest of your code, in a functioning JSFiddle or something... — XML
– XML, Commented Jun 28, 2015 at 12:09

jme11 · Accepted Answer · 2015-06-28 15:10:06Z

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>

Collectives™ on Stack Overflow

Call jQuery function inside AngularJS control

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related