Angular - 作用域&&自定义指令

控制器作用域

控制器和函数一样,也有自己的作用域.类似函数,作用域范围内先自己自身找,自己有就用自己的,自己没有的话会向上查找,找父控制器.
子级可以访问父级元素,父级元素不能访问子级元素
每个控制器(controller)都对应一个模型(Model),也就是($scope)对象,不同层级控制器下的$scope便产生了作用域.
模块之间是不可以嵌套使用的
但是控制器之间是可以嵌套使用的
使用ng-init 定义全局作用域。范围是整个模块。$rootScope
示例代码: 函数作用域

<script>
    var a = 10;
    function test() {
        var a = 20;
        var b = 10;
    }
    //alert(a);
    test();
    //子级可以访问父级的作用域。
    //父级不能访问子级的作用域。
</script>

示例代码:控制器作用域

// 全局作用域也就是根作用域
<body ng-app="app" ng-init="name='eee'">
<div ng-controller="appController1">
    <div>{{name}}</div>
</div>
<div ng-controller="appController2">
    <div>{{name}}</div>
</div>
<script type="text/javascript" src="../js/angular.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller('appController1',['$scope',function ($scope) {
        // 输出eee
    }]);
    app.controller('appController2',['$scope',function ($scope) {
        // 输出eee
    }]);
    
</script>
</body>

自定义指令

AngularJs允许根据实际业务需要自定义指令,通过angular全局对象下的directive方法实现
示例代码 :

<body ng-app="app" ng-controller="appController">
<ele>
    <ul>
        <li>我是transclude1</li>
        <li>我是transclude2</li>
        <li>我是transclude3</li>
        <li>我是transclude4</li>
        <li>我是transclude5</li>
    </ul>
</ele>
<script src="../js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('appController', ['$scope', function ($scope) {
    }]);
    // 第一个参数:指令名称
    // 第二个参数:回调函数
    app.directive('ele', function () {
        return {
            // E:代表元素 A:代表属性 C:当做类
            restrict: 'EAC', // 以哪一种形式出现
            template: "<div><h1>自定义指令</h1> <p>p标签</p> <div>232222222</div></div>",
            replace: true, //是否替换原标签 
                           //如果要替换整个标签 需要一个大标签把自定义的标签包裹起来
            transclude: false  // 是否保留原标签的内容
        }
    });
</script>
</body>

模版命令
示例代码 :

// 上面的代码都一样 就是需要自定义一个html文件,然后引入 方便管理
app.directive('ele', function () {
        return {
            // E:代表元素 A:代表属性 C:当做类
            restrict: 'EA', // 以哪一种形式出现
            templateUrl: "./ele.html",
            replace: true, //是否替换原标签
            transclude: true  // 是否保留原标签的内容
        }
    });

过滤器

AngularJs内置9个过滤器
过滤器的本质就是函数
管道符上次的结果作为下一次的参数传递
示例代码 :

<!-- 
1.currency默认是美元符号 也可以自定义符号 
currency:将数值转化为货币格式
-->
<p>{{price | currency:'&yen'}}</p>
<!--
2.日期格式化 年(y) 月(M) 日(d) 星期(EEEE/EEE) 时(H/h) 分(mm) 秒(ss) 毫秒(sss)
-->
<p>{{dateTime | date:'yyyy-MM-dd hh:mm:ss'}}</p>
<!--
3.filter:在给定数组中选择满足条件的一个子集,并返回一个新数组,其条件可以是字符串\对象\函数
-->
<p>{{course | filter:'j'}}</p>
<!--
4.limitTo:取出字符串或者数组的的前几位(正数)或者后几位(负数)
-->
<p>{{course | limitTo:-2}}</p>
<!--
5.uppercase:把文本转换成大写
lowercase: 把文本转成小写
-->
<p>{{name | uppercase | lowercase}}</p>
<!--
6.numStr:在number当中不能出现非数字
-->
<p>{{numStr | number:4}}</p>
<!--
7.orderBy:排序true降序 false升序
-->
<p>{{scores | orderBy:'':false}}</p>
<p>{{scores | orderBy:'score':true}}</p>
<!--
8.取出所有的数据
-->
<p>{{stus}}</p>
<!--
9.json 也是取出数据
-->
<p>{{stus | json}}</p>

<script src="../js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('appController', ['$scope', function ($scope) {
        // price
        $scope.price = "18";
        // 日期
        $scope.dateTime = new Date();
        // 数组
        $scope.course = ['ios','html','java','ui'];
        $scope.course = [100,30,40,20,4];
        // 大小写转化
        $scope.name = 'LENG'
        /* 实现原理
        * parseInt() 直到遇到非数字才停止
        * number:里面不允许出非数字。
        * */
        $scope.numStr = '18';
        // 排序
        $scope.scores = [100,30,40,20,4];
        $scope.stus = [
            {name:'zs',score:20},
            {name:'wc',score:90},
            {name:'ls',score:59}
        ]
    }]);
</script>

自定义过滤器

AngularJs内置过滤器外,还可以根据业务需要自定义过滤器
通过模块对象实例提供的filter方法自定义过滤器
示例代码 :

<body ng-app="app" ng-controller="appController">
<p>{{price | eFilter:'eFilter'}}</p>
<!-- 需求:把第一个字符变成大写 -->
<p>{{name | eeUppercase}}</p>
<p>{{price | eeCurrent : '&'}}</p>
<script src="../js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('appController', ['$scope', function ($scope) {
        $scope.price = '18.8';
        $scope.name = 'ee';
    }]);
    // 自定义指令
    app.directive('ee', function () {
        return {
            restrict: "ECA",
            template: "<h1>ee</h1>",
            replace: true
        }
    });
    /*过滤器的本质就是一个function
     * 第一个参数:过滤器的名称 第二个参数:回调函数
     * input 就是管道符前面执行的结果
     * 返回值为一个函数
     * */
    app.filter('eFilter', function () {
        return function (input, args) {
            console.log(input + args);
        }
    });
    angular.module('app').filter('eeUppercase',function () {
        return function (input) {
            var str = input[0].toUpperCase() + input.slice(1);
            return str;
        }
    });
    app.filter('eeCurrent',function () {
       return function (input, args) {
           if(args){
               return args + input;
           }
           else {
               return + '$' + input;
           }
       }
    });
    // 打印结果  Ee  &18.8
</script>
</body>

依赖注入

AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用这导致了使用者和被使用者之间存在依赖关系。
所谓依赖注入是指在运行时自动查找依赖关系
然后将查找到依赖传递给使用者的一种机制。

依赖注入为分两种:

行内式注入
以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数
推荐使用行内式注入.
推断式注入
没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称
这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。
示例代码 :

<body ng-app="app" ng-controller="xiController">
<h1>{{name}}</h1>
<script src="../js/angular.js"></script>
<script>
    /*
     * 1.什么是服务？
     *   服务就是angular内置的一些功能。直接拿到该功能做一些事情。
     * 2.依赖注入？
     *   模块当中依赖系统的哪些功能（用到系统->angular默认的哪些功能）
     *   查找该功能，找到之后， 系统会对应的功能，传递给指定的模块。这个过程，依赖注入。
     *   行内式注入
     *   推断式注入
     * */
    var app = angular.module('app',[]);
    // 行内式注入 -- 推荐使用行内式注入
    app.controller('appController',['$scope',function ($scope) {
        $scope.name = '行内式注入';
    }]);
    // 推断式注入 -- 当代码被压缩时 参数就不会被找到
    app.controller('xiController',function ($scope) {
        $scope.name = '推断式注入'
    });
</script>
</body>

$location服务

服务就angular内置的功能
它的本质就是一个对象或函数
$location是对原生Javascript中location对象属性和方法的封装。
示例代码 :

<body ng-app="app" ng-controller="appController">
<!--
    https://www.baidu.com/?tn=93912046_hao_pg
    https:协议
    主机地址:www.baidu.com 192.52.6.74
    端口号：63342/8080
    /code/06-$location服务.html  :文件路径
    ？name=xmg&age=10   : 传递的参数
    #/test/ 锚点  hash值。
-->
<p>{{name}}</p>
<p>{{absUrl}}</p>
<p>{{hostName}}</p>
<p>{{url}}</p>
<p>{{search}}</p>
<script>
    // js原生网络地址
    for (var key in location) {
        console.log(key + '------' + location[key]);
    }
</script>
<script src="../js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('appController', ['$scope', '$location', function ($scope, $location) {
        $scope.name = 'xibalu';
        // 获取当前地址
        $scope.absUrl = $location.absUrl();
        // 获取主机名
        $scope.hostName = $location.host();
        // 获取锚点后面的地址
        $scope.url = $location.url();
        // 获得第二个锚点之后的地址
        $scope.hash = $location.hash();
        // 单页面应用程序 锚点搜索
        $scope.search = $location.search();
    }]);
</script>
</body>

定时器服务

$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
示例代码 :

<body ng-app="app" ng-controller="appController">
<p>{{name}}</p>
<p>{{timeDate | date:'yyyy-MM-dd hh:mm:ss'}}</p>
<input type="button" value="点击停止" ng-click="stop()">
<script src="../js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('appController', ['$scope', '$timeout', '$interval', function ($scope, $timeout, $interval) {
        // 一次定时器
        $timeout(function () {
            $scope.name = 'xiba';
        }, 2000);
        // 多次定时器
        var timer = $interval(function () {
            $scope.timeDate = new Date();
        },1000);
        /*如何停止定时器
         * 通过变量保存。
         * $interval.cancel(timer);
         * */
        $scope.stop = function () {
            $interval.cancel(timer);
        }
    }]);
</script>
</body>

更多内容 ! 请移步本人博客 ! 点击跳转

控制器作用域

自定义指令

过滤器

自定义过滤器

依赖注入

依赖注入为分两种:

$location服务

定时器服务