ANGULARJS training to re-understand two-way binding and event explanation

Two-way binding is one of the Angularjs highlights, in the previous "Angularjs training HelloWorld" chapter about the next two-way binding, now we "recall", first look at the following code snippet:

In view:

<input type= ' button ' ng-click= "set ()" Value= "Set Value" > <input type= "text" ng-model= ' userName2 ' >

The corresponding method in the controller:

$scope. Set = function () {$scope. userName2 = ' Eason ';} $scope. $watch (' userName2 ', function () {alert (' Ng-model UserN Ame2 have been changed, now is: ' + $scope. userName2); });

The function we want to implement is: Click the button to the model named "UserName2" input box set to the string "Eason", use $watch Register an observation event, when the value of the model userName2 change, will trigger the registered callback method, Prints out the values in the model.

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/4B/F8/wKioL1Q2L0HyP3YwAADe4uPQjy0831.jpg "title=" Two_ Way_data_binding.png "alt=" Wkiol1q2l0hyp3ywaade4upqjy0831.jpg "/>

With this diagram two-way binding good understanding of the bar. The internal implementation mechanism follow-up we introduce.

How do I register a button with a button? In Angularjs we can use the built-in instruction Ng-click to bind the event, the ng-click= "set ()" in the above code, which can be implemented in the controller in the form of Scope.set. Ng-click in fact the HTML original click event encapsulation, in fact, not only the Click event, the native event to the Focus,blur,change event can be found in the official API Angularjs the corresponding method. Concrete can poke here http://docs.angularjs.cn/api/ng/directive

In the previous section we looked at the nesting of scope under the example, and now if we want a specific function to span multiple scopes, we need to provide a useful way to communicate between any two controllers . In fact, the ANGULARJS provides a message to be sent up or down along the scope scope chain, that is, $emit, $broadcast

Look first:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/4B/F7/wKiom1Q2Pu-CYALSAABmlT2Q_e4935.jpg "title=" Qq20141009155247.png "alt=" Wkiom1q2pu-cyalsaabmlt2q_e4935.jpg "/>

$emit sends the request up from the current scope, and the request arrives at $rootscope.

$broadcast send the request down from the current scope,

Basic usage of $emit:

$scope. $emit (' event name ', argument);

$scope. $broadcast (' event name ', argument);

The first parameter is the event name, and the second name is the data to be passed.

Now that you have a way to pass events up and down, how do you accept the corresponding event names? We can use $on monitoring. As follows:

$scope. $on (' event name ',function (evt) {

});

Let's look at a complete example:

function Innerctrl ($scope) {$scope. $emit (' someevent ', [n/A]);}  function Outerctrl ($scope) {$scope. $on (' Someevent ', function (mass) {Console.log (mass)});} By running the code, we can see the value of the array in the console.

The Event object also has a lot of familiarity and methods, which we probably browse under:

Targetscope,

CurrentScope,

Name

Stoppropagation,

Preventdefault,

Defaultprevented:calling preventdefault () sets defaultprevented to True

ANGULARJS also provides an event that listens to the state of a public event, for example (excerpt from part):

$includeContentLoaded: The $includeContentLoaded event fires from the nginclude Directive WH En the Nginclude content is Reloaded.

$locationChangeSuccess: The $locationChangeSuccess event is broadcasted from the $rootScope if and only if W E has not prevented the $locationChangeStart event when the location of th e Browser changes successfully

$routeChangeSuccess:

$destroy

Well, this is the end of the introduction, there are questions please leave a message, thank you!

This article is from the "Eason's HCC" blog, so be sure to keep this source http://hcc0926.blog.51cto.com/172833/1561827

ANGULARJS training to re-understand two-way binding and event explanation