快樂的星期五到了!!!
期待假日的同時,決定快速且優雅地寫完今天這一篇。
在 「初談 directive - isolate scope」 篇有寫到 ‘&’ 的作法,可傳送 function 到 parent scope,讓 directive 呼叫。
範例:完成簡單的選擇顏色器
http://plnkr.co/edit/ZeEj9GolVUhowvJ1UL50
<!-- 注意:一定要定義 method argument
不可以只定義 color-picker="updateStyle" -->
<div color-picker=“updateStyle(name, red, green, blue)"></div>
angular.module('myExample', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.myStyle = {'background-color': 'rgb(120,120,120)'};
$scope.name = 'luffy';
$scope.updateStyle = function (name, red, green, blue) {
// output luffy,可以取得 parent scope (此 controller) 自己的參數
console.log('name', name);
$scope.myStyle['background-color'] = 'rgb('+ red + ',' + green + ',' + blue + ')';
}
}]).directive('colorPicker', function() {
return {
restrict: 'A',
scope: {
action: '&colorPicker'
},
template:
'<input type="number" ng-model="red" min="0" max="255" ng-change="updateColor()">' +
'<input type="number" ng-model="green" min="0" max="255" ng-change="updateColor()">' +
'<input type="number" ng-model="blue" min="0" max="255" ng-change="updateColor()">',
link: function (scope, element, attrs) {
scope.red = 120;
scope.green = 120;
scope.blue = 120;
scope.updateColor = function () {
// 順序不用跟 HTML 一樣,可是 key 要一樣
scope.action({'red': scope.red, 'green': scope.green, 'blue': scope.blue});
};
}
};
});
此範例中,我們需要注意的是在呼叫 directive function 的 argument key 需要跟在 HTML 定義的 argument 一模一樣。
我們才可以找到對應的值。
<div color-picker=“updateStyle(name, red, green, blue)"></div>
scope.action({'red': scope.red, 'green': scope.green, 'blue': scope.blue});
( name 是 controller 屬性,不需要額外定義)
假如不想用 scope 的方式傳 function,可以改用 $parse 去解析 element attributes。
這樣就可以完成不是 isolate scope 又可以使用 function 的 directive。
修改上面範例
http://plnkr.co/edit/VZCIocZGV0JHRL6zJIRN
截取片段:
var update = $parse(attrs.colorPicker);
scope.updateColor = function () {
// 因為是 isolated scope, 需要 call scope.$parent
update(scope.$parent, {'blue': scope.blue, 'red' : scope.red, 'green': scope.green});
};
AngularJS 就是使用 $parse 寫 event directive,並且傳 $event 參數給我們取用。
AngularJS event directive code