AngularJS (iv) communication issues between--ANGULARJS and other frameworks

In a Web project, there is no guarantee that only one JavaScript framework is used, and one common scenario is to use both the jquery and ANGULARJS frameworks for development, and the other common scenario is that you now need to extend the functionality of a project that was previously fully developed in the jquery framework. In order to facilitate the need to use ANGULARJS. In both cases, there is a problem of communicating with each other between different frameworks. Using the following three Angularjs methods, as shown in table 1, this problem can be better solved:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/71/88/wKiom1XS-2GyFzHYAAFobr4fL94438.jpg "title=" 18-4. PNG "alt=" wkiom1xs-2gyfzhyaafobr4fl94438.jpg "/>

Table -1 Angularjs Methods

There are two points that need to be specifically explained:

1. Handler

handler is a function that receives two parameters, and two parameters are the values before the monitored data changes and the values after the monitored data are changed, in the following form:

var handler = function (newval, oldval) {//some action};

2. Expression

Here'sexpressionThere are two cases in which the data being monitored is a string.$scope[expression]Another case is a function with a return value, at which time the data being listened to is the return value of the function. In general, if you want to listen to Angularjs customserviceUsed in differentcontrollerShared data (about the difference betweencontrollerShare data, please refer to this section), you must use the second case mentioned aboveexpressionAs a function with a return value, such as:

$scope. $watchCollection (function () {return datashareservice.detailinfo;}, Function (NEWOBJ, oldobj) {//some action} );

Here is an example of how a multi-javascript framework works together, in this case, the jquery UI and the Angularjs. ANGULARJS Controls whether the button for the jquery UI can be clicked, by clicking the button in the jquery UI, dynamically displaying the button click in Angularjs, page effect 1 ~ Figure 3:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/71/82/wKioL1XS2p3BNRpZAABXlt3Lss8594.jpg "alt=" button to click " Style= "margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px; padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px; border-left-width:0px; "/>

Figure 1 button in clickable state

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/71/85/wKiom1XS2JHh9DmjAABV_ajGRnc152.jpg "alt=" button is not clickable " Style= "margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px; padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px; border-left-width:0px; "/>

Figure 2 button is in a non-point state

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/71/82/wKioL1XS2p2wsUzGAABac2Jgg5I955.jpg "alt=" when the button is clicked, Click volume Dynamic Increase "style=" margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right : 0px;padding-bottom:0px;padding-left:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px; border-left-width:0px; "/>

Figure-3 Click on the button, the amount of clicks increases.

The following are the HTML and JavaScript codes, and the important ones are explained in comments:

index.html File:

<! doctype html>
main.js  File: 
/** * jquery ui Code  */$ (function ()  {    // .button () is JQuery  ui decorates the code of the button element without having to delve into     $ (' #jqui  button '). button (). Click (function (E)  {         //  using the Angularjs element selector, angularregion is the id attribute of the HTML element, Note that you cannot enclose it in quotation marks         // .scope () You can select the $scope object in the controller where the current element is located         //   angular.element (angularregion). Scope ()  === $scope        //  in the &NBSP;ANGULARJS code can take $scope objects that are other frames interacting with angularjs * * * The most important * * * point         //  if direct  ....scope (). Handleclick (), then $ The Scope.handlerclick function will also execute, but view will not refresh         angular.element ( angularregion). Scope (). $apply (' Handleclick () ');        //  Using the jquery element selector &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&Nbsp; // $ (' #angularRegion '). Scope (). $apply (' Handleclick () ');         //  $apply () directly using expressions, you can do this, but it is not recommended         //  Angular.element (angularregion). Scope (). $apply (' clickcounter = clickcount + 1 ');     }); ** * angularjs Code  */var app = angular.module ("Exampleapp",  []); App.controller ("Simplectrl",  function ($scope,  $log)  {    $ scope.buttonenabled = true;  //  whether the logo button can be clicked      $scope. ClickCounter  = 0;  //  clicks Counter      $scope. Handleclick = function ()  {  //  Increment button clicks          $scope .clickcounter++;          $log. info ("click counter increase, now  clickcounter =  ",  $scope. CliCkcounter);    }    //  Monitor $scope.buttonenabled variable, do not use $ scope.buttonenabled     $scope. $watch (' buttonenabled ',  function (newval)  {         $ (' #jqui  button '). Button ({             disabled: !newval        });     });    //  monitoring object, you can use this method instead of directly listening to $scope.buttonenabled variables      //  $scope .settings = {    //      buttonEnabled: true    // };    //  $scope. $ Watchcollection (' Settings ',  function (newobj, oldobj)  {    //      $ (' #jqui  button '). Button ({    //          disabled: !newobj.buttonenabled    //     });     // }); 
Inmain.jsWe have commented out a lot of code that can implement the same functionality as the code above, and interested readers can try it on their own. If you need to monitor the object,index.htmlAlso need to be modified in the
<input type= "checkbox" ng-model= "buttonenabled" > Enable Button
Revision changed to
<input type= "checkbox" ng-model= "settings.buttonenabled" > Enable Button
Believe that the Angularjs two-way binding has an understanding of the reader must not be unfamiliar with this.
As long as these three methods are used, the communication problem with ANGULARJS in the framework of jquery UI is solved.
Finish.

 
  
 
Resources:
"Pro AngularJS" Adam Freeman
This article is from the "barrel of fake dog excrement" blog, please be sure to keep this source http://xitongjiagoushi.blog.51cto.com/9975742/1685638
AngularJS (iv) communication issues between--ANGULARJS and other frameworks