angularjs中directive聲明scope對象時修飾符解釋和用法，angularjsdirective
在angular中我們定義directive方法時，可以看到
return { restrict: 'AE', scope: {}, template: '<div></div>', link: function() {}}
除了代碼中出現的屬性，還有一些其他的屬性可供配置，這裡不作詳述。
今天我們要說的重點是scope欄位。
常規用法設定
scope: { name: '=', age: '=', sex: '@', say: '&'}
<div my-directive name="myName" age="myAge" sex="male" say="say()"></div>
function Controller($scope) { $scope.name = 'Pajjket'; $scope.age = 99; $scope.sex = '我是男的'; $scope.say = function() { alert('Hello，我是彈出訊息'); };}
那這幾種修飾符的含義又是什麼呢，他們如何關聯起來的
”＝“：指令中的屬性取值為controller中對應$scope上屬性的取值，可用於雙向資料的綁定
”@“：指令中的取值為html中的字面量/直接量；建立一個local scope property到DOM屬性的綁定。因為屬性值總是String類型，所以這個值總是返回一個字串。如果沒有通過@attr指定屬性名稱，那麼本地名稱將與DOM屬性的名稱一直。例如<widget my-attr=”hello {{name}}”>，widget的scope定義為：{localName:’@myAttr’}。那麼，widget scope property的localName會映射出”hello {{name}}"轉換後的真實值。name屬性值改變後，widget scope的localName屬性也會相應地改變（僅僅單向，與下面的”=”不同）。name屬性是在父scope讀取的（不是組件scope）
”&“：指令中的取值為Contoller中對應$scope上的屬性，但是這屬性必須為一個函數回調
<!doctype html>
<html ng-app="App">
<head>
<script src="angular.js"></script>
</head>
<body>
<form ng-controller="Ctrl">
<input type="radio" ng-model="phone" name="phone" value="Moto">Moto
<input type="radio" ng-model="phone" name="phone" value="Miui">Miui<br>
<button ng-click="check('0')">選擇1</button>
<button ng-click="check('1')">選擇2</button><br>
Value = {{phone || json}}
</form>
</body>
<script>
var appModule = angular.module('App', []);
appModule.controller('Ctrl', function($scope) {
$scope.phone = 'Moto';
$scope.check = function(number) {
if (number == 0) {
$scope.phone = 'Moto';
} else {
$scope.phone = 'Miui';
}
};
});
</script>
</html>
怎使用angularjs實現文字框擷取焦點
可以寫個指令
<!DOCTYPE html><html ng-app="myApp"><head><title>angularjs-focus</title></head><body><input type="text" set-Focus=""><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript">var myApp = angular.module('myApp',[]);myApp.directive('setFocus', function(){ return function(scope, element){ element[0].focus(); };});</script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
