zoukankan      html  css  js  c++  java
  • angular directive scope

    angular directive scope

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

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

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

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

      2.3 .   & :代表继承或者使用父作用域中scope绑定的方法。

    下面用一个demo 来说明:

    example:

    directive html:

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

    coffee directive code :

    # 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 
  • 相关阅读:
    tomcat页面跳转问题
    linux shell脚本攻略总结
    nginx中配置tomcat
    centos中文输入法支持
    esxi创建centos系统
    linux日常总结
    你不知道的编码软件排行榜
    Beyond Compare切换比较会话过滤模式的方法
    用Beyond Compare找代码bug的方法
    文件对比工具比较表格时怎么显示行号
  • 原文地址:https://www.cnblogs.com/rengised/p/5602461.html
Copyright © 2011-2022 走看看