• AngularJS自定义Directive初体验


    通常我们这样定义个module并随之定义一个controller.

    var app = angular.module('myApp', []);
    
    app.controller('CustomersController', ['$scope', function($scope){
        var counter = 0;
        
        $scope.customer = {
            name:'',
            street:''
        };
        
        $scope.customers = [
            {
                name:'',
                street:''
            },
            ...
        ];
        
        $scope.addCustomer = function(){
            counter++;
            $scope.customers.push({
                name:'' + counter,
                street: coutner + ''
            });
            
            $scope.changeData = function(){
                counter++;
                $scope.customer = {
                    name: '',
                    street:counter + ''
                };
            }
        }
    }]);


    ■ 使用ng-include引用子视图

    在一个子视图中可以使用CustomersController,子视图的名称是:child.html

    Name:{{customer.Name}}
    Street:{{customer.street}}

    然后在一个主视图中比如是index.html使用子视图:

    <div ng-include="child.html"></div>

    ■ 初识自定义directive

    如果使用自定义directive也可以做到。

    angular.module('myApp').directive('myInfo', function(){
        return{
            template:'Name:{customer.name}<br/>Street:{{customer.street}}'
        };
    })

    在index.html主视图中可以这样使用自定义的directive。

    <div my-info></div>

    为什么myInfo到了视图中变成了my-info?这是一个惯例,比如我们经常用到的ng-repeat,在AngularJS中的源代码中是ngRepeat。还有,为什么,自定义的名称为myInfo的directive可以使用CustomersController的scope呢?因为主视图index.html中使用了CustomersController,而同在index.html视图中的<div my-info></div>共享了CustomersController的scope。

    directive通常的用法包括如下:

    angular.module('modulename')
        .directive('myDirective', function(){
            return {
                restrict: 'EA', //E表示element, A表示attribute,C表示class,M表示commnent,即注释
                scope:{
                    title: '@' //@读属性值,=双向绑定,&用户函数
                }
                template: '<div>{{myVal}}</div>',
                templateUrl: 'app/sample.html',
                controller: 'myController',
                link:function($scope, element, attrs){}//DOM操作
            };
        })

    ■ 自定义direcitve操作DOM元素

    app.directive('myDomDirective', function(){
        return {
            link: function($scope, ele, attrs){
                ele.bind('click', function(){
                    ele.html('');
                });
                
                ele.bind('mouseenter', function(){
                    ele.css('background-color','red');
                });
                
                ele.bind('mouseleave', function(){
                    ele.css('background-color','white');
                });
            }
        };
    });

    在页面中这样使用:

    <div my-dom-directive></div>

    ■ 封闭自定义directive的scope

    默认情况下,自定义的directive的会共享父scope,但是,有时候我们希望自定义的directive的scope是封闭的、独立的,比如希望自定义的direcitve被用在多处。

    只需要加上scope属性就好了,如下:

    angular.module('myDirecitve', function(){
        return {
            scope:{},
            template: ''
        }
    });

    scope属性接受一个对象,在该对象中可以定义独立scope内的属性,而属性值的写法有三种,分别是@,=,&

    ● 使用@,外部scope赋值不影响封闭scope中的变量

    angular.module('myApp').directive('myIsolateScopeWithName', function(){
        return {
            scope:{
                name: '@'
            },
            template: 'Name:{{name}}',
            controller: 'MyController'
        };
    });

    在封闭的scope中定义了一个name变量,占位符@表示这里接受一个值。

    如何给这里的变量赋值呢?

    一种是把name成为一个属性来接收值:

    <div my-isolated-scope-with-name name="{{ customer.name }}"></div>

    一种是在MyController中给name赋值:

    $scope.name = '';

    如果把name="{{ customer.name }}"改成myname="{{ customer.name }}"呢?

    那就需要这样定义:

    angular.module('myApp').directive('myIsolateScopeWithName', function(){
        return {
            scope:{
                name: '@myname'
            },
            template: 'Name:{{name}}',
            controller: 'MyController'
        };
    });

    ● 使用=,外部scope赋值会影响封闭scope中的变量

    angular.module('myApp').directive('myIsolateScopeWithEqual', function(){
        return {
            scope:{
                customer: '='
            },
            template: '<ul><li ng-repeate="prop in customer">{{prop}}</li></ul>'
        };
    });

    注意,这里的customer是作为变量在使用,而不是{{customer}},一旦外部的赋值发生变化会影响独立scope中的customer变量值。同样,一旦独立scope中的customer值发生变化,也会影响外部的scope的customer属性值。

    外部这样使用:

    <div my-isolated-scope-with-equal customer="customer"></div>


    ● 使用&,允许外部scope传递一个函数给封闭scope

    angular.module('myApp').directive('myIsolateScopeWithFunction', function(){
        return {
            scope: {
                datasource: '=',
                action:'&'
            },
            template: '<ul><li ng-repeat="prop in datasource">{{ prop }}</li></ul> ' + '<button ng-click="action()">Change Data</button>'
        };
    });

    这样使用这个directive

    <div my-isolated-scope-with-function 
         datasource="customer" 
         action="changeData()">
    </div>

    changeData方法被定义在了controller里面:

    $scope.changeData = function () {
          counter++;
          $scope.customer = {
              name: 'James',
              street: counter + ' Cedar Point St.'
          };
    };

    如何让外部scope传递一个带参函数给封闭scope呢?

    angular.module('directivesModule').directive('isolatedScopeWithController', function () {
        return {
            restrict: 'EA',
            scope: {
                datasource: '=',
                add: '&',
            },
            controller: function ($scope) {
                ...
    
               
                $scope.addCustomer = function () {
                    //Call external scope's function
                    var name = 'New Customer Added by Directive';
                    $scope.add({ name: name });
    
                    //Add new customer to directive scope
                    $scope.customers.push({
                        name: name,
                        street: counter + ' Main St.'
                    });
                };
            },
            template: '<button ng-click="addCustomer()">Change Data</button>' +
                      '<ul><li ng-repeat="cust in customers">{{ cust.name }}</li></ul>'
        };
    });

    在页面中这样调用:


    <div isolated-scope-with-controller datasource="customers" add="addCustomer(name)"></div>

    ■ 允许自定义的direcitve被嵌套


    只要把tranclude设置成true就可以。

    "use strict";
    
    angular.module("psFramework").directive("psFramework",function(){
        return {
            transclude: true,
            scope:{
                title: '@',
                subtitle:'@',
                iconFile:'@'
            },
            controller: "psFrameworkController",
            templateUrl: "ext-modules/psFramework/psFrameworkTemplate.html"
        };
    })

    然后在页面中就可以这样使用:

    <ps-framework title="", subtile="", icon-file="">
        <ps-menu>
            ...
        </ps-menu>
    </ps-framework>

    参考:https://weblogs.asp.net/dwahlin/

  • 相关阅读:
    Mysql的join语句
    Excel的VLOOKUP函数
    python求极值点(波峰波谷)
    python多项式拟合:np.polyfit 和 np.polyld
    hdfs显示、查看、下载、上传、删除文件操作
    pip备份、安装requirements.txt中的包和anaconda的安装(linux)
    spark-submit提交任务到集群,分发虚拟环境和第三方包
    VLAN实验3:理解Hybrid接口的应用
    VLAN实验2:配置Trunk接口
    WLAN实验1:划分不同VLAN及Acess配置
  • 原文地址:https://www.cnblogs.com/darrenji/p/4975374.html
Copyright © 2020-2023  润新知