呼叫控制AngularJS里面jQuery函数 [英] Call jQuery function inside AngularJS control

问题描述

有关我AngularJS应用程序我需要使用jQuery插件 http://www.wysibb.com 。

这个功能我想使用 $（＃replyContents），BB code（）; 应该从 replyContents ，给我的BB code值。

我所试图做的是我的控制器我设定的范围内为：

 函数controlForum（$范围）{
    $ scope.contents =（$（＃replyContents），BB code）。    $ scope.btnReply =功能（）{
        的console.log（$ scope.contents）;
    }
}
 

不过，只是返回null，什么都没有。

我已经包括jQuery的，因为我可以叫 $（＃replyContents）wysibb（wbbOpt）; 页面上的控制器，它的工作原理之外

我如何获得 BB code 功能到我的角度函数内部工作？

解决方案

更好的方法是使用被写入作为本机AngularJS指令（S）的文本编辑器。 textAngular 是相当不错的。

如果你真的必须使用一个jQuery插件，那么你可以使用像角UI utils的的JQuery直通或者你可以创建自己的指令。

下面是使用自己的指令的一个例子。要同步与应用到文本区域的NG-模型编辑器中的内容，可以要求ngModel，然后使用ngModel API的$ setViewValue更新基于某些事件模型。在这个例子中，我更新的时候keyUp事件是'编辑'DIV内开枪时，点击工具栏上的按钮之一。

显然，如果你想用这个编辑器做类似的东西上传图片文件，你必须添加不同类型的监听器/处理器的。

\r

\r

angular.module（'jqueryplugin.demo'，['wysibb']）;\r
\r
angular.module（'jqueryplugin.demo'）\r
.controller（'MainCtrl'，['$范围'，函数（$范围）{\r
  $ scope.logIt =功能（VAL）{\r
    的console.log（VAL）;\r
  };\r
}]）;\r
\r
angular.module（'wysibb'，[]）\r
.directive（'wysibb'，函数（）{\r
  返回{\r
    限制：'A'，\r
    要求：'ngModel'，\r
    链接：功能（范围，元素，ATTRS，ngModel）{\r
      VAR textarea的，编辑，按钮;\r
      VAR的选择= {\r
        按钮：粗体，斜体，下划线\r
      };\r
      textarea的= element.wysibb（选件）;\r
      编辑= element.next（）;\r
      按钮= element.parents（'。wysibb'）找到（'wysibb-工具栏。'）;\r
      editor.on（'KEYUP'，函数（）{\r
        范围。$应用（函数（）{\r
          。ngModel $ setViewValue（editor.html（））;\r
        }）;\r
      }）;\r
      buttons.on（'点击'，功能（）{\r
        范围。$应用（函数（）{\r
          。ngModel $ setViewValue（editor.html（））;\r
        }）;\r
      }）;\r
    }\r
  };\r
}）;

\r

@import URL（// netdna.bootstrapcdn.com/bootstrap/3.1.1 /css/bootstrap.min.css）;\r
@import URL（http://cdn.wysibb.com/css/default/wbbtheme.css）;\r
\r
textarea的{\r
  最小高度：130px;\r
}

\r

＆LT;脚本的src =// ajax.googleapis.com/ajax/libs /jquery/1.11.0/jquery.min.js\"></script>\r
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/1.3.16/angular.js＆GT;＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =htt​​p://cdn.wysibb.com/js/jquery.wysibb.min.js＆GT;＆下; /脚本＆GT;\r
＆LT; D​​IV NG-应用=jqueryplugin.demo＆GT;\r
  ＆LT; D​​IV NG控制器=MainCtrl＆GT;\r
    ＆LT; textarea的NG-模式=TEXTwysibb＆GT;＆LT; / textarea的＆GT;\r
    ＆LT; pre＆GT;输出：其中code＆GT; {{文本}}＆LT; / code＆GT;＆LT; / pre＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

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?

解决方案

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>

这篇关于呼叫控制AngularJS里面jQuery函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！