AngularJS Notes
Dec 29, 2013Filter
Directive
一個最基本的Directive 是這樣的
app = angular.module 'myApp', []
app.directive "superman", ->
restrict: "E"
template: "<div>superman save the world</div>"
restrict 中文叫限制,前面的例子restrict: 'E'
就是限制directive 爲Element,default 是restrict: 'A'
再看下一個
app = angular.module 'myApp', []
app.directive "superman", ->
restrict: "A"
link: ->
alert('it's work)
restrict: 'A'
A for attritube 就是用在html element 的attritubes
restrict: 'C'
C for class
restrict: 'M'
M for comment,comment 用法比較詭異,來看例子
<!-- directive:superman -->
簡化
app = angular.module 'myApp', []
app.directive "superman", ->
(scope, element)->
console.log element
Isolate Scope
isolate scope 這東西是有點難懂,我還是儘量的把它搞懂了isolate scope 有三種形式
```coffeescript main.coffee app.directive “drink”, -> scope: flavor: ‘@’ template: “{{flavor}}”
```jade index.jade
div(ng-controller="AppCtrl")
div(drink flavor="cherry")
app.controller "AppCtrl", ($scope) ->
$scope.ctrlFlavor = "shit"
app.directive "drink", ->
scope:
flavor: "="
template: "{{flavor}} flavor is good"
jade index.jade
div(ng-controller="AppCtrl")
div(drink flavor="ctrlFlavor")