angularjs绑定属性_AngularJS隔离范围绑定表达式教程

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

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

<!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绑定属性

angularjs绑定属性_AngularJS隔离范围绑定表达式教程相关推荐

angularjs绑定属性_AngularJS隔离范围属性绑定教程
angularjs绑定属性 We have discussed about the isolate scope and its basic usage in the previous tutorial ...
angularjs绑定属性_AngularJS指令和数据绑定示例教程
angularjs绑定属性 In the previous post, we have successfully created and run our first angular applicati ...
angularjs双向绑定_AngularJS隔离范围双向绑定示例
angularjs双向绑定 Earlier we looked at AngularJS Isolate scope attribute binding and I hope you got a be ...
基于继承类的属性模版中无法绑定的原因和解决方法
原文:基于继承类的属性模版中无法绑定的原因和解决方法这个的晚上想学学WPF 做一个类似于ERP 左边菜单.构思一下思路 ...... 创建一个类基于Expander类. 1 public class ...
Vue 模板语法插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例
1 插值操作 1.1 Mustache语法也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性
一.插值操作 1. Mustache 如何将data中的文本数据,插入到HTML中呢? 我们已经学习过了,可以通过Mustache语法(也就是双大括号). Mustache: 胡子/胡须. 我们可以像 ...
python类中的属性分为类属性和实例属性两种_python中类和实例如何绑定属性与方法示例详解...
前言 python类与实例的方法的调用中觉得云里雾里,思考之后将自己的想法记录下,一来加深自己理解,巩固自己记忆,而来帮助一些想要学习python的朋友理解这门抽象的语言,由于Python是动态语言, ...
Angular中数据文本绑定、绑定Html、绑定属性、双向数据绑定的实现方式
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
angular 绑定自定义属性_Angular2实现自定义双向绑定属性
整理文档,搜刮出一个Angular 2实现自定义双向绑定属性的代码,稍微整理精简一下做下分享. import { Component, OnInit, Output, Input, EventEm ...

angularjs绑定属性_AngularJS隔离范围绑定表达式教程

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

angularjs绑定属性_AngularJS隔离范围绑定表达式教程相关推荐

最新文章

热门文章