angular directive scope

angular directive scopejavascript

1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope;html

2.当directive 中指定scope属性时,scope做用域有3种方式:java

  2.1 .   = : 表明数据双向绑定,只要该属性发生改变 ,app(即父做用域) 中scope对应的值和 directive中对应的值将同时发生改变 ; app

  2.2 .   @ : 表明数据单向绑定,该值的改变只会影响directive ,不会影响app(即父做用域) 其余值, 也就是孤立做用域 ;spa

  2.3 .   & :表明继承或者使用父做用域中scope绑定的方法。双向绑定

 

下面用一个demo 来讲明:rest

example:code

directive html:htm

<gmb-per say="myalert()" abc="gmbPerNotification_d">gmb-per</gmb-per>

coffee directive code :blog

# module

angular.module('demo',[])
  .controller 'myCtrl',($scope)->

    $scope.gmbPerNotification_d = [1,2,3]
    $scope.myalert = ->
      alert(11)

#directive

pushNotificationApp.directive 'gmbPer',($timeout,$compile) ->
    restrict: 'AE'
    #terminal : true
    transclude : true
    #replace : true
    template:'<div class="col-lg-4 chartWrap" ng-click="say()" ng-repeat="perN in abc">121212</div>'
    #replace : true
    scope:
        abc : '='
        gmbPerNotification_d : '='
        say : '&'
    controller : ($scope) ->

        #$scope.mytest = [1,2]

    link : (scope, element, attrs) ->

        console.log 
相关文章
相关标签/搜索