zoukankan      html  css  js  c++  java
  • angular 自定义指令

    Template-expanding directive:

    <div ng-controller="Controller">
      <div my-customer></div>
    </div>
    
    angular.module('docsSimpleDirective', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      };
    }])
    .directive('myCustomer', function() {
      return {
        template: 'Name: {{customer.name}} Address: {{customer.address}}'
      };
    });
    
    结果:Name: Naomi Address: 1600 Amphitheatre
    <div ng-controller="Controller">
      <div my-customer></div>
    </div>
    
    angular.module('docsTemplateUrlDirective', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      };
    }])
    .directive('myCustomer', function() {
      return {
        templateUrl: 'my-customer.html'
      };
    });
    
    my-customer.html:
    
    Name: {{customer.name}} Address: {{customer.address}}
    
    结果:Name: Naomi Address: 1600 Amphitheatre

      

    <div ng-controller="Controller">
      <div my-customer type="name"></div>
      <div my-customer type="address"></div>
    </div>
    
    angular.module('docsTemplateUrlDirective', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      };
    }])
    .directive('myCustomer', function() {
      return {
        templateUrl: function(elem, attr){
          return 'customer-'+attr.type+'.html';
        }
      };
    });
    
    customer-name.html:
    Name: {{customer.name}}
    
    customer-address.html:
    Address: {{customer.address}}
    
    结果:Name: Naomi
    Address: 1600 Amphitheatre

      

    The restrict option is typically set to:
    
    'A' - only matches attribute name
    'E' - only matches element name
    'C' - only matches class name
    These restrictions can all be combined as needed:
    
    'AEC' - matches either attribute or element or class name
    
    <div ng-controller="Controller">
      <my-customer></my-customer>
    </div>
    
    angular.module('docsRestrictDirective', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      };
    }])
    .directive('myCustomer', function() {
      return {
        restrict: 'E',
        templateUrl: 'my-customer.html'
      };
    });
    
    my-customer.html:
    Name: {{customer.name}} Address: {{customer.address}}
    
    结果:Name: Naomi Address: 1600 Amphitheatre

      

    Isolating the Scope of a Directive:

    <div ng-controller="NaomiController">
      <my-customer></my-customer>
    </div>
    <hr>
    <div ng-controller="IgorController">
      <my-customer></my-customer>
    </div>
    
    angular.module('docsScopeProblemExample', [])
    .controller('NaomiController', ['$scope', function($scope) {
      $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      };
    }])
    .controller('IgorController', ['$scope', function($scope) {
      $scope.customer = {
        name: 'Igor',
        address: '123 Somewhere'
      };
    }])
    .directive('myCustomer', function() {
      return {
        restrict: 'E',
        templateUrl: 'my-customer.html'
      };
    });
    
    my-customer.html:
    Name: {{customer.name}} Address: {{customer.address}}
    结果:
    Name: Naomi Address: 1600 Amphitheatre
    
    
    
    
    Name: Igor Address: 123 Somewhere
    
    
    <div ng-controller="Controller">
      <my-customer info="naomi"></my-customer>
      <hr>
      <my-customer info="igor"></my-customer>
    </div>
    
    angular.module('docsIsolateScopeDirective', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
      $scope.igor = { name: 'Igor', address: '123 Somewhere' };
    }])
    .directive('myCustomer', function() {
      return {
        restrict: 'E',
        scope: {
          customerInfo: '=info'
        },
        templateUrl: 'my-customer-iso.html'
      };
    });
    
    my-customer-iso.html:
    Name: {{customerInfo.name}} Address: {{customerInfo.address}}
    
    结果:Name: Naomi Address: 1600 Amphitheatre
    Name: Igor Address: 123 Somewhere
    <div ng-controller="Controller">
      <my-customer info="naomi"></my-customer>
    </div>
    
    angular.module('docsIsolationExample', [])
    .controller('Controller', ['$scope', function($scope) {
      $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
      $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
    }])
    .directive('myCustomer', function() {
      return {
        restrict: 'E',
        scope: {
          customerInfo: '=info'
        },
        templateUrl: 'my-customer-plus-vojta.html'
      };
    });
    
    Name: {{customerInfo.name}} Address: {{customerInfo.address}}
    <hr>
    Name: {{vojta.name}} Address: {{vojta.address}}
    
    结果:
    Name: Naomi Address: 1600 Amphitheatre
    Name: Address:
  • 相关阅读:
    ABAP 更改DN外向交货单
    ABAP 参照SO item 创建DN
    ABAP 获取客户供应商的电话,地址,email等相关信息
    ABAP 自定义的ALV导出excel按钮,导出ALV内表中其中某几列的数据
    ABAP 后台JOB布置例子
    ABAP 选择屏幕字段动态隐藏和显示
    ABAP 选择屏幕上的导入模板下载按钮
    ABAP 选择屏幕文件导入时,单元格超50字符怎么处理
    ABAP 选择屏幕字段动态隐藏和显示
    人脸检测数据集
  • 原文地址:https://www.cnblogs.com/xiaotaiyang/p/4828022.html
Copyright © 2011-2022 走看看