AngularJS隔离范围绑定表达式教程
时间：2020-02-23 14:29:35 来源:igfitidea点击:
我们已经看到了如何使用局部作用域属性将值作为字符串(" @")传递到指令中，以及如何使用双向数据绑定(" =")绑定到外部对象。
在本文中，我们将研究"&"，它用于从隔离范围调用父范围的表达式。
AngularJS隔离范围"&"示例
"&"局部作用域属性允许指令的使用者传递函数，并且指令可以在需要时调用。
在本节中，我们将通过示例解释隔离范围"&"。
我们将创建一个myEmployee指令以显示输入文本字段和一个按钮。
当用户单击按钮时，它将通知控制器并使用输入值警告消息。
下面的示例演示了此用法。
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>'
};
});
创建一个控制器MainCtrl并在其范围内定义一个函数clickMe()。
然后，我们创建一个myEmployee指令。
该伪指令在其隔离范围内创建一个名为send的自定义本地范围属性。
这是通过scope {send："&"}完成的。
在此示例中，发送只是clickMe函数的别名。
调用send时，将调用传入的clickMe函数。指令中的模板包含一个文本字段和一个按钮。
仅当在输入字段(ng-show =" inputMsg"")中键入内容时，该按钮才会显示。
单击按钮时，可以调用scope属性send(实际上是对传入的clickMe函数的引用)。
我们已经使用了这种特殊语法来传递输入值
send({message：inputMsg}以下代码显示了如何使用我们的指令并将控制器中定义的clickMe函数传递给scope属性，并发送
<div my-employee send="clickMe(message)"></div>
- 控制器中的clickMe函数将提醒我们传入的消息。
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>
