Angularjs to monitor scope variables and external invoke scope methods _angularjs

Source: Internet
Author: User

In Angularjs, it is sometimes necessary to monitor a variable in scope because changes in variables affect the display of some interface elements. Sometimes, you also want to invoke a method of scope through jquery.

For example, the following scenario:

<div>
<button id= "jqbtn" >jq button</button>
</div>
<div id= "Ngsection" Ng-controller= "Ngctrl" >
<input type= "checkbox" ng-model= "Jqbtnstate"/> Toggle the JQ button state
<p >counter: {{counter}}</p>

Above, we hope:

Jqbtnstate variable value in scope if False let the button with ID jqbtn disabled
Click on the button with ID jqbtn to invoke a method in scope to allow the variable counter in scope to increase by 1

We might write this:

$ (' #jQBtn '). On ("click", Function () {
console.log ("JQuery button clicked");
The question to consider is:
//How to invoke a method in scope here, so that the variable counter of scope is increased by 1
})

...

Myapp.controller ("Ngctrl", function ($scope) {
$scope. counter = 0;
Here, how to let the jqbtnstate variable value change to tell the outside?
$scope. jqbtnstate = false;
$scope. Jqbtnclick = function () {
$scope. counter++
}

In fact, using the $watch method you can monitor the change of a variable in scope and call the callback function when the change occurs.

Myapp.controller ("Ngctrl", function ($scope) {
$scope. counter = 0;
$scope. Jqbtnstate = false;
$scope. $watch ("Jqbtnstate", function (newval) {
$ (' #jQBtn '). attr (' disabled ', newval);
});
$scope. Jqbtnclick = function () {
$scope. counter++
}
})

Above, the button with ID jqbtn is disabled when the Jqbtnstate variable value is false.

How does the outside world invoke the scope method?

--Get scope first, then use the $apply method to invoke the method within scope.
$ (' #jQBtn '). On ("click", Function () {
console.log ("JQuery button clicked");
var scope = angular.element (ngsection). scope ();
Scope. $apply (function () {
scope.jqbtnclick ();
});

Above, by obtaining scope, the Jqbtnclick method within scope is invoked using the $apply method to increase the variable counter of scope by 1.

The above mentioned is for the ANGULARJS to monitor the scope variable as well as the external call scope method related knowledge, hope to be helpful to everybody.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.