angular directive =,&

<html lang="en" ng-app="Demo">
<head>
    <meta charset="utf-8">
    <title>Directive Html</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('Demo', [], angular.noop);
        app.directive('ysBlock', function(){
            return {
                compile: angular.noop,
                template: '<div style="width: 200px; border: 1px solid black;">'+
                                '<h1 style="background-color: gray; color: white; font-size: 22px;">{{ title }}</h1>'+
                                '<div>{{ text }}</div>'+
                           '</div>',
                replace: false,
                scope: {
                    title: '@titlearr', //directive里面的title取值为element属性titlearr的动态的值{{title}}
                    text: '=textarr'//directive里面text的取值为element属性textarr的值text在element中scope中的值,scope.text
                },//这里的=title其实用的是
                restrict: 'E'
            };
        });
        app.controller('TestCtrl', function($scope){
            $scope.title = '标题在这里';
            $scope.text = '内容在这里';
        });
      angular.bootstrap(document, ['Demo']);
    </script>
</head>
<body>
  <div ng-controller="TestCtrl">
    <ys-block titlearr="{{title}}" textarr="text"></ys-block>
    <p>标题: <input ng-model="title" /></p>
    <p>内容: <input ng-model="text" /></p>
    <span>{{title}},{{text}}</span>
  </div>
</body>
</html>
<html lang="en" ng-app="Demo">
<head>
    <meta charset="utf-8">
    <title>Directive Html</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        //&attr 是包装一个函数出来,这个函数以节点所在的 scope 为上下文这里是一个上下文交错的环境,通过 & 这种机制,让指令的 scope 与节点的 scope 发生了互动
        var app = angular.module('Demo', [], angular.noop);
        app.directive('a', function(){
            var func = function(element, attrs, link){
                    return function llink(scope){
                        console.log(scope);
                        scope.a(); // 执行了here = here + 1 所以虽然TestCtrl设置here为123,页面上最终的here为124
                        scope.b(); // 执行了TestCtrl的show()
                    
                        scope.show = function(here){// ----点击是执行link里面的show(here)与TestCtrl无关
                            console.log('Inner, ' + here);
                            scope.a({here: 5});// ---- 但是此处的scope.a({here: 5}),因为a执行的是TestCtrl的上下文,于是a传递的一个对象,里面的所有属性
                                                //TestCtrl就全收下了,接着执行here = here+1,所以会显示6
                        }
                    }
            }
            return {
                compile: func,
                scope: {
                    a: '&abc', //scope.a是&abc 即:scope.a = function() {here = here +1;} here是TestCtrl的
                    b: '&ngClick'//scope.b是&ngClick 即:scope = function() {show(here);} 这里的show()和here都是TestCtrl的
                },
                restrict: 'A'
            };
        });
    
        app.controller('TestCtrl', function($scope){
            $scope.here = 123;
            console.log($scope);
            $scope.show = function(here){
                console.log(here);
            }
        });
        angular.bootstrap(document, ['Demo']);
  </script>
</head>
<body>
  <div ng-controller="TestCtrl">
    <div a abc="here = here + 1" ng-click="show(here)">这里</div>
    <div>{{ here }}</div>
  </div>
</body>
</html>

 

posted @ 2013-09-29 13:50  海边菩提  阅读(1371)  评论(0编辑  收藏  举报