詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號的區(qū)別使用
對于一個Html5框架的好壞,我們有幾個評判標(biāo)準(zhǔn), 輕量級,可拓展,易復(fù)用,速度快。
對組件復(fù)用這點,angular以directive的形式展示給開發(fā)者,是一個還算不錯的選擇,作為一個UI組件,必定存在數(shù)據(jù)交互。
那么數(shù)據(jù)交互過程中的幾個符號我們一定要有所了解,以及他們的區(qū)別是什么,防止我們在運用過程中出錯。
1. 首先,我們看一scope作用域下面@的使用:
html
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <div ng-controller="listCtrl"> <input type="text" ng-model="t" /> <test title="{{t}}" > <span>我的angularjs</span> </test> </div> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="main.js"></script> </body></html>
js
var myApp=angular.module('myApp',[]); myApp.controller('listCtrl',function($scope){ $scope.logchore="motorola"; }); myApp.directive('test',function(){ return { 'restrict':'E', scope:{ title:"@" }, template:'<div >{{title}}</div>' } });
這個必須指定的,這里的title是指令里scope的@對應(yīng)的,t就是控制域scope下的 .
2. = 的使用。
html
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <div ng-controller="listCtrl"> <input type="text" ng-model="t" /> <test title="t" > <p>{{title}}</p> <span>我的angularjs</span> </test> </div> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="main05.js"></script> </body></html>
js
var myApp=angular.module('myApp',[]); myApp.controller('listCtrl',function($scope){ $scope.logchore="motorola"; }); myApp.directive('test',function(){ return { 'restrict':'E', scope:{ title:"=" }, template:'<div >{{title}}</div>' } });
和上面@相比,這個直接賦值等于scope域下的t了
3. 最好我們看看&符號的使用
html
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <div ng-controller="listCtrl"> <test flavor="logchore()" ></test> </div> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript" src="main05.js"></script> </body></html>
js
var myApp=angular.module('myApp',[]); myApp.controller('listCtrl',function($scope){ $scope.logchore=function(){ alert('ok'); }; }); myApp.directive('test',function(){ return { 'restrict':'E', scope:{ flavor:"&" }, template:'<div ><button ng-click="flavor()"></button></div>' } });
嘗試一下,就明白了,簡潔明了!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 學(xué)習(xí)AngularJs:Directive指令用法(完整版)
- AngularJS中的Directive實現(xiàn)延遲加載
- AngularJS入門心得之directive和controller通信過程
- AngularJS中directive指令使用之事件綁定與指令交互用法示例
- Angular之指令Directive用法詳解
- 詳解angularJs中自定義directive的數(shù)據(jù)交互
- AngularJS directive返回對象屬性詳解
- AngularJS中的Directive自定義一個表格
- Angular 根據(jù) service 的狀態(tài)更新 directive
- AngularJs directive詳解及示例代碼
相關(guān)文章
angular和BootStrap3實現(xiàn)購物車功能
這篇文章主要為大家詳細介紹了angular和BootStrap3實現(xiàn)購物車功能的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01Angular4.x通過路由守衛(wèi)進行路由重定向?qū)崿F(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁面(推薦)
這篇文章主要介紹了Angular4.x通過路由守衛(wèi)進行路由重定向,實現(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁面,這個功能在網(wǎng)上商城項目上經(jīng)常會用到,下面小編給大家?guī)砹私鉀Q方法一起看看吧2018-05-05