angularjs指令之绑定策略@、=、&

JavaScript 2019-01-07

引入主题背景：angular 的指令配置中的template可以直接使用硬编码写相应的代码，不过也可以根据变量，进行动态更新。那么需要用到那些变量，因用法的不同，所以需要设置合适的绑定策略。

1：先说指令域scope的@

我觉得描述很费劲，直接用代码来阐述：

AngularJS.html

rush:xhtml;">

<div ng-controller="listCtrl">

//这个必须指定的，这里的title是指令里scope的@对应的，t就是控制域scope下的 我的angularjs

main05.js

rush:js;"> var myApp=angular.module('myApp',[]); myApp.controller('listCtrl',function($scope){ $scope.logchore="motorola"; });

myApp.directive('kid',function(){
return {
'restrict':'E',scope:{
title:"@"
},template:'

{{title}}
'

}
});

在输入框输入数字会绑定到指令模板的title中。

2：再说说Scope的=

angularjs.html

rush:xhtml;">

<div ng-controller="listCtrl">

//和上面相比，这个直接赋值等于scope域下的t了

{{title}}

我的angularjs

main05.js代码如下：

rush:js;"> var myApp=angular.module('myApp',scope:{ title:"=" },template:'
{{title}}
'

}
});

3：最后说&，这个是用来方法调用的

angularjs.HTML代码如下：

rush:xhtml;">

<div ng-controller="listCtrl">

//先比=，函数赋值的形式，而logchore函数必须是域scope下声明的函数

main05.js代码如下：

rush:js;"> var myApp=angular.module('myApp',function($scope){ $scope.logchore=function(){ alert('ok'); }; });

myApp.directive('kid',scope:{
flavor:"&"
},template:'

<button ng-click="flavor()">
'

}
});

如果logchore带有参数，

angularjs.HTML代码如下：

rush:xhtml;">

<div ng-controller="listCtrl">

main05.js代码如下：

rush:js;"> var myApp=angular.module('myApp',function($scope){ $scope.logchore=function(x){ alert(x); }; });

myApp.directive('kid',template:'

<button ng-click="flavor({t:v})">
'

}
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

angularangularangularjs指令绑定指令绑定策略绑定策略

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...