1. 程式人生 > >angularjs的自定義directive指令的繫結策略scope:”@”、”=”、”&”

angularjs的自定義directive指令的繫結策略scope:”@”、”=”、”&”

通常我們知道指令預設是可以跟外界通訊的.
比如:

<div ng-controller="mytest">
<test></test>
</div>

test自定義指令是可以訪問到mytest控制器的scope
要想把test自定義指令獨立作用域,也就是說跟mytest切斷關係:可以加上指令的引數scope:{},這樣就能做到互不相干了
但是也不可能完成切斷關係,總會有某些東西要互相互動,如果想跟mytest控制器的某個scope屬性互動,就要用繫結策略

下面來介紹三種繫結策略的做法

[email protected]符號
“@”是通過DOM的屬性來跟mytest控制器互動繫結一起

<div ng-controller="mytest">
<test></test>
</div>
app.controller("mytest"function ($scope) {
$scope.name = 
"jack";
$scope.age = 25;
});
app.directive("test",function(){
return {
restrict : "E",
template : '<div name="{{name}}"></div>',
replace : 

相關推薦

angularjs定義directive指令策略scope:”@””=””&”

通常我們知道指令預設是可以跟外界通訊的. 比如: <div ng-controller="mytest"> <test></test>

在sublime 中使用 定義配置按鍵模擬vim游標移動

好吧。我承認我是個sublime的新手。 對於 vim也就是記住那麼幾個快捷鍵。但是這完全不影響我工作的質量。 今天在寫使用sublime 寫Node的時候,感覺憋手蹩腳的.我擦.怎麼辦?想使用一些快捷鍵來操作. 下面是我的一些配置. 注意了: 在 preferences

android ListView佈局之三(使用定義的Adapter資料,通過contextView.setTag資料)有按鈕的ListView

http://blog.csdn.net/chenzheng_java/article/details/6202586 最終結果圖: 程式碼結構示意圖 vlist2.xml程式碼: &

Android 定義Listview 如何Sqlite資料庫資料

首先我們需要有個載入的檔案,這個佈局檔案裡面的bills.xml,這個佈局裡面有個Listview控制元件。 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns

angularJs定義指令的三種策略

angularJs中指令scope隔離域中有3種繫結策略: .directive("test",function(){ return { scope:{

AngularJS定義指令directive:父類scope指令scope之間的通訊

我們知道angularJs中,指令中有scope,父類controller中也有scope,兩者的通訊方式有三中,分別是 scope:false;直接使用父類的scope scope:true;繼承父類的scope scope:{@,=,&}隔離的s

AngularJS定義指令directivescope屬性

一、介紹: 在AngularJS中,除了內建指令如ng-click等,我們還可以自定義指令。自定義指令,是為了擴充套件DOM元素的功能。程式碼中,通過指定directive中的restrict屬性,來決定這個指令是作為標籤(E)、屬性(A)、屬性值(C)、

AngularJS學習筆記之directive——scope選項與策略

開門見山地說,scope:{}使指令與外界隔離開來,使其模板(template)處於non-inheriting(無繼承)的狀態,當然除非你在其中使用了transclude嵌入,這點之後的筆記會再詳細記錄的。但是這顯然不符合實際開發中的需求,因為實際上,我們經常想要我們的

淺談angularjs指令的三種策略

在angularjs的指令中存在著三種繫結策略,他們分別是’=’,’@’,’&’ 全文討論圍繞下面這個例子,可在進入codepen編輯 ‘=’繫結策略 ‘=or(=attr)’,雙向繫結,將本地作用域上的屬性同父級作用域上的屬性

AngularJs定義指令詳解(5) - link

演示 hang cursor off drag font 雙向 事件 date 在指令中操作DOM,我們需要link參數,這參數要求聲明一個函數,稱之為鏈接函數。 寫法: link: function(scope, element, attrs) {  // 在這裏操作DO

angularjs scope策略

控制器controller中的的scope與controller中指令的scope的互動 ScopeEqual.html <!DOCTYPE html> <html ng-ap

AngularJS》——scope的三種策略

三種繫結符的含義: scope:{}使當前指令作用域與外界隔離開來,使其模板(template)處於non-inheriting(無繼承)的狀態 @的含義:把當前作用域屬性當字串傳遞,繫結外層scop

angularjs定義指令

app.directive('nameunique', function($http) {     return {             require: 'ngModel',//require代表另一個指令的名字,它將會作為link函式的第四個引數          

AngularJS定義指令標籤

建立一個模組 var app = angular.module('app', []);建立一個簡單指令標籤app.directive('alert', function(){ return { template: '<div class="alert">

解析angularjs中的三種資料策略

 匯入:我們想要實現這樣的效果:當我們點選標題的時候展示下面的內容,再點選則收回去。        一、首先回顧一下有哪些繫結策略?  看這個實在是有點抽象了,我們來看具體的例項分析吧! 二、簡單的Demo例項    @繫結:傳遞一個字串作為屬性的值。比如 st

angularJs定義指令父子指令通訊

老規矩,先上效果圖:首先說一下本文的重點:1、父指令如何呼叫子指令中的方法;2、子指令如何呼叫父指令中的方法;(都不是通過廣播的方式)如果有同學還不知道父指令如何通過[email protected]&給子指令傳遞引數,或者一些其他自定義指令的屬性(scop

angularJS 定義指令

angularJS 自定義屬性 類似於過濾器filter,內建了許多方法同時可以自定義方法。 通過angular.model來建立模組物件: -angular.model: controlle

AngularJs定義指令詳解

定義指令的方法:angular.module('myApp', []) .directive('myDirective', function () { // 指令定義放在這裡 }); 第一個引數,指令的名字myDirective 用來在檢視中引用特定的指令。第二

Vuejs定義select2指令

del node ace upd direct prop fault 綁定 get   在做select2插件的時候遇到一些坑,最終解決如下: Vue.directive(‘select2‘, { inserted: function (el, bin

vue15 定義元素指令標簽指令

odi msg log 傳遞 max eight rip () .com <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <