angularjs绑定属性
We have seen how to use local scope properties to pass values into a directive as strings ( “@” ) and how to bind to external objects using a two-way data binding ( “=”). 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: <input type="text" ng-model="inputMsg">'+
'<button ng-show="inputMsg" ng-click="send( {message : inputMsg} )">Click Me!</button>'
};
});- 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属性，并发送
<div my-employee send="clickMe(message)"></div>- The clickMe function in the controller will alert our passed in message. 控制器中的clickMe函数将提醒我们传入的消息。
index.html
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Isolate Scope</title>
</head>
<body>
<div ng-app="mainApp">
<div ng-controller="MainCtrl">
<div my-employee send="clickMe(message)"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</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功能。
翻译自: https://www.journaldev.com/7573/angularjs-isolate-scope-binding-expression-tutorial
angularjs绑定属性
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
