指令 scope

angular学习笔记(三十)-指令(8)-scope

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div ng-controller="c1" ng-init="c11='c11'">
        {{c11}}
        <div ng-controller="c2" ng-init="c21='c21'">
            <div>{{c21}}</div>
            <div d2></div>
            <div ng-controller="c3" ng-init="c31='c31'">
                <div>{{c31}}</div>
                <div d3></div>
            </div>
        </div>
    </div>
    <script src="angular.min.js"></script>
    <script>
        angular.module('myApp', [])
        .controller('c1', function($scope) {
        })
        .controller('c2', function($scope) {
        })
        .controller('c3', function($scope) {
        })
        .directive('d3', function() {
            return {
                restrict: 'A',
                scope: false, // 默认
                template: '<div>{{c11}} {{c21}} {{c31}}</div>',
                controller: function($scope, $element, $attrs, $transclude) {
                    $scope.c31 = 'c31c'
                }
            };
        })
        .directive('d2', function() {
            return {
                restrict: 'A',
                scope: true,
                template: '<div>{{c11}} {{c21}}</div>',
                controller: function($scope, $element, $attrs, $transclude) {
                    $scope.c21 = 'c21c'
                }
            };
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html ng-app="dirAppModule">
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="angular.min.js"></script>
  <script type="text/ng-template" id="text.html">
    <div>
      <h3 style="background-color:{{color}}" ng-transclude></h3>
    </div>
  </script>
  <script>
    var appModule = angular.module('dirAppModule', []);
    appModule.controller('bgColor',function($scope){});
    appModule.directive('cdHello',function() {
        return {
            restrict:'EAC',
            templateUrl:'text.html',
            replace:true,
            transclude:'element',
            scope:{
                color:'@colAttr'
            },
            link:function(scope,ele,attrs,ctrl,trans) {
                ele.bind('click',function() {
                    scope.$apply(function() {
                        scope.color = '#C0DCC0';
                    })
                })
                ele.bind('mouseover',function() {
                    ele.css({'cursor':'pointer'})
                })
            }
        }
    })
  </script>
</head>
<body>
  <div ng-controller="bgColor">
    <input ng-model="color" placeholder="请输入颜色值"/>
    <br/>
    <cd-hello col-attr="{{color}}"><span>code_bunny</span></cd-hello>
  </div>
</body>
</html>

@绑定是col-attr="{{color}}",而=绑定是bg-color="color".一个是"{{color}}",一个是"color".

<!DOCTYPE html>
<html ng-app="dirAppModule">
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="angular.min.js"></script>
  <script type="text/ng-template" id="text.html">
    <div>
      <h3 style="color:{{text_color}};background-color:{{color}}" ng-transclude></h3>
    </div>
  </script>
  <script>
    var appModule = angular.module('dirAppModule', []);
    appModule.controller('bgColor',function($scope){});
    appModule.directive('cdHello',function(){
        return {
            restrict:'EAC',
            templateUrl:'text.html',
            replace:true,
            transclude:'element',
            scope:{
                color:'=bgColor'
            },
            link:function(scope,ele,attrs,ctrl,trans){
                ele.bind('click',function(){
                    scope.$apply(function(){
                        scope.color = '#C0DCC0'
                    })
                });
                ele.bind('mouseover',function(){
                    ele.css({'cursor':'pointer'})
                });
            }
        }
    });
  </script>
</head>
<body>
  <div ng-controller="bgColor">
    <input ng-model="color" placeholder="请输入颜色值"/>
    <br/>
    <cd-hello bg-color="color"><span>code_bunny</span></cd-hello>
  </div>
</body>
</html>

相关阅读:
多角度分析平台即服务？PaaS的类型和用例
 2021.3.10 Android导出Excel表
 2021.3.9 个人作业阶段2
2021.3.8 Android图像视图1
2021.3.7 Android图像视图
 2021.3.6 Android页面刷新
 2021.3.5 个人作业1+家庭记账本（8）
2021.3.4 家庭记账本（7）
2021.3.3 Android项目打包+家庭记账本（6）
2021.3.2 开课博客+家庭记账本（5）
原文地址：https://www.cnblogs.com/jzm17173/p/4940262.html