angularjs绑定属性

We have seen how to use local scope properties to pass values into a and how to bind to external objects using a In this post, we are going to look at the “&” which is used to call an expression on the parent scope from the isolated scope.

我们已经看到了如何使用局部作用域属性将值传递给以及如何使用绑定到外部对象 在本文中，我们将研究“＆” ，它用于从隔离范围调用父范围的表达式。

AngularJS隔离范围“＆”示例 (AngularJS Isolate Scope “&” Example)

The “&” local scope property allows the consumer of a directive to pass in a function and directive can invoke whenever it wants to.

In this section, we are going to explain isolate scope “&” with an example. We will create a myEmployee directive to display an input text field and a button. When the user clicks on the button, it will notify the controller and alert a message using the input value.

“＆”局部作用域属性允许指令的使用者传入函数，并且指令可以在需要时调用。

在本节中，我们将通过示例解释隔离范围“＆”。 我们将创建一个myEmployee指令以显示输入文本字段和一个按钮。 当用户单击按钮时，它将通知控制器并使用输入值警告消息。

The following example demonstrates this usage.

以下示例演示了此用法。

app.js

app.js

var app = angular.module('mainApp', []);	app.controller("MainCtrl", function($scope){		$scope.clickMe = function(message){			alert(message);		}	});	app.directive("myEmployee", function() {  	return {      		scope:{			send:"&"		},		template: 'Type Something: '+			  'Click Me!'  	};	});

• Create a controller MainCtrl  and define a function clickMe() in its scope.
  创建一个控制器MainCtrl并在其范围内定义一个函数clickMe（） 。
• Then we create a myEmployee directive.
  然后，我们创建一个myEmployee指令。
• The directive creates a custom local scope property within its isolate scope named send. This is done using scope { send: "&" }. In this example,send is just an alias for clickMe function.  When send is invoked, the clickMe function that was passed in will be called.
  该指令在其名为send的隔离范围内创建一个自定义本地范围属性。 这是通过使用scope { send: "&" } 。 在此示例中， send只是clickMe函数的别名。 调用send时， 将调用传入的clickMe函数。
• The template within the directive contains a text field and  a button.
  指令中的模板包含一个文本字段和一个按钮。
• The button displays only when something is typed in the input field ( ng-show="inputMsg").
  仅当在输入字段（ ng-show="inputMsg" ）中键入内容时，该按钮才会ng-show="inputMsg" 。
• When the button is clicked the scope property send, which is really a reference to the clickMe function that was passed in) can then be invoked.
  单击按钮时，可以调用scope属性send （实际上是对传入的clickMe函数的引用）。
• We have used this special syntax to pass the input value send( {message : inputMsg}
  我们使用了这种特殊语法来传递输入值send( {message : inputMsg}
• The following code shows how to use our directive and pass the clickMe function which is defined in the controller to the scope property, send
  以下代码显示了如何使用我们的指令并将控制器中定义的clickMe函数传递给scope属性，并发送

•  The clickMe function in the controller will alert our passed in message.
  控制器中的clickMe函数将提醒我们传入的消息。

index.html

index.html

You will see the following output on your browser.

您将在浏览器中看到以下输出。

That’s all for now and we will see more AngularJS features in the upcoming posts.

目前仅此而已，我们将在后续文章中看到更多AngularJS功能。

翻译自:

angularjs绑定属性