對于一個Html5框架的好壞，我們有幾個評判標準， 輕量級，可拓展，易復用，速度快。
對組件復用這點，angular以directive的形式展示給開發者，是一個還算不錯的選擇，作為一個UI組件，必定存在數據交互。
那么數據交互過程中的幾個符號我們一定要有所了解，以及他們的區別是什么，防止我們在運用過程中出錯。
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的@對應的，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>' } });
新聞熱點
疑難解答
圖片精選
