2.指令

作者: miner敏儿 | 来源:发表于2017-05-27 13:02 被阅读0次

1.内置指令

什么是指令?

HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。

内置指令

ng-app 指定应用根元素，至少有一个元    素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示，true显示、    false不显示
ng-hide控制元素是否隐藏，true隐藏、    false不隐藏
ng-if控制元素是否“存在”，true存在、    false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src=angular.js></script>
    <script>

        /*1.创建模板*/
        var app = angular.module('app',[]);

        /*2.创建控制器 */
        app.controller('zmController',['$scope',function($scope){
            $scope.name1='我是p标签1'
            $scope.name2='我是p标签2'
        }])
    </script>
</head>
<!--3.绑定模板 -->
<!--4.绑定控制器-->
<body ng-app="app" ng-controller='zmController'>

<!--本质上就是css样式中的display-->
<!--还是存在的只是隐藏了-->

<p ng-show = "true">{{name1}}</p>
<p ng-hide = "false">{{name2}}</p>

<!--控制该标签是否存在-->
<!--不存在了-->
<p ng-if='false'>{{name2}}</p><!--出现以后我下次再也不想要他了 考虑到性能问题 比如广告 蒙版 -->
</body>
</html>

2.事件处理

使用方法为:ng-事件名称 = “事件响应方法名称( 参数)"
    参数可以自己指定, 
    也可以传入事件对象$event
    使用$scope来去实现事件定义的方法
       $scope.事件名称 = function(参数){

        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            color: red;
        }
        .fz50{
            font-size: 50px;
        }
    </style>
    <script src = "angular.js"></script>
    <script>

        /*1.创建模板*/

        var app = angular.module('app',[]);

        /*2.创建控制器*/
        app.controller('zmController',["$scope",function($scope){
            /*1*/
            $scope.name1 = "我是p标签1";
            $scope.name2 = "我是P标签2";

            /*2*/
            $scope.url="002.jpg"

            /*4.*/
            $scope.isClass=false;

            /*5.*/
            //在模型当中实现事件方法
            $scope.change1=function(){
                $scope.isClass=true;
            };
            $scope.change2=function(){
                $scope.isClass=false;
            }
            
            
            
            $scope.sty={
                'font-size':'100px'
            }
        }]);

        /*3.绑定模板*/
        /*4.绑定控制器*/

    </script>
</head>
<body ng-app='app' ng-controller="zmController">
<!--1-->
<!--本质上就是css样式中的display-->
<!--还是存在的只是隐藏了-->
<p ng-show = "true">{{name1}}</p>
<p ng-hide = "false">{{name2}}</p>

<!--控制该标签是否存在-->
<!--不存在了-->
<p ng-if='false'>{{name2}}</p>

<!--2.-->
<!--![](002.jpg)--><!--实用原生的src链接一个图片-->
<!--![]({{url}})--><!--也显示但是会报错 script在下面的时候 页面从上往下执行走到src找地址 找url没有url地址 第一次找地址没有找到 找不到{{url}} 会报错 404 -->
![]({{url}})<!--原生的HTML认不得ng-src 所以就不发请求就不会有错误 走到下面加载angular的时候再去加载

Angular 机制：
把所有DOM元素渲染完成之后，再去回头解析属于angular的东西


-->
<!--3-->
<!--
ng-class="{key:value}" 可以写多个
value是bool类型
-->
<p ng-class='{red:true,fz50:true}'>我是p标签</p>
<!--4-->
<p ng-class='{red:isClass,fz50:isClass}'>我是p标签</p>

<!--5-->
<!--事件处理
    1.定义事件
    2.在模型当中实现事件方法
-->
<button ng-click='change1()'>添加类</button>
<button ng-click='change2()'>移除类</button>
</body>
</html>

ng-include

在html当中是没有办法直接引入其它文件。
浏览器不允许html对文件进行操作。
原因：出于安全考虑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.js"></script>
    <script>
        /*1.创建模板*/
        var app = angular.module('app',[]);
        /*2.创建控制器*/
        app.controller('zmController',["$scope",function($scope){


        }])
        /*3.绑定模板*//**/
        /*4.绑定控制器*/


    </script>
</head>
<body ng-app="app">
<!--
  原理:
  其实就是发送一个ajax请求
  把请求的结果,插入到dom当中
-->

<div ng-include="'header.html'"></div>
<div>主题</div>
<div ng-include="'footer.html'"></div>

</body>
</html>

ng-switch
用于数据筛选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src=angular.js></script>
<script>
    /*1.创建模块*/
    var app = angular.module('app',[]);
    /*2.创建控制器*/
    app.controller("zmController",["$scope",function($scope){

        $scope.course = ['html','js' ,'css']

    }])

    /*3.绑定模板*/
    /*4.绑定控制器*/



</script>
<body ng-app='app' ng-controller='zmController'>
<ul>
    <li ng-repeat="value in course" ng-switch='value'>{{value}}
        <!--满足条件的展示出来 不满足的隐藏-->
    <p ng-switch-when='css'>{{value}}</p>
    </li>
</ul>
</body>
</html>

3.自定义指令

AngularJS允许根据实际的业务需要自定义指令.通过angular全局对象下的directive方法实现

自己给原生的html标签添加一些新属性,属性的名称自己决定
添加属性之后,要做什么功能,自己去决定

image.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app='app'    ng-controller="zmController">

<p>{{name}}</p>
<!--自定义指令-->
<zm></zm>
<p zm></p>

<script src=angular.js></script>
<script>
    /*1.创建模板*/
    varapp=angular.module('app',[])   ;
    /*2.创建控制器*/
    app.controller("zmControlle",["$scope",function($scope){
$scope.name="zm"
    }])
    /*3.绑定模板*/
    /*4.绑定控制器*/
    
 <!--自定义指令-->

    app.directive("zm", function()     {
        /*返回一个对象*/
        return{
            /*
             E:以元素形式出现
             A:以属性形式出现
             C:以类的形式出现
             * */
            restrict:'EA',
            template:"<div><1>我是一   个指令模板<p>我是标签<    /p></h1>   <p>1111</p></div>,// //指令模板必须得要有一个根元素包裹起来。
            replace:false //是否替换原标签
        }

    });
</script>
</body>
</html>

自定义指令

第一个参数指令名称

第二个参数回调函数

E:以元素形式出现
A:以属性形式出现
C:以类的形式出现

image.png

templateUrl:"./template.html"//可以传路径

image.png

transclude:true //是否保留标签当中的内容

是否替换原有标签一定要是false,否则不出现任何东西

image.png

指令的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app='app' ng-controller="zmController">
<!--<zmDir></zmDir>   结果出不来-->
<zm-dir></zm-dir><!--我是p-->
<p zm-dir></p><!--我是p-->
<!--1.在使用指令时,一定要注意大小写,

如果定义指令名称为大写,在使用时转成"-"-->
</body>
<script src=angular.js></script>
<script>
    /*1.创建模板*/
    var app=angular.module('app',[]);
    /*2.创建控制器*/
    app.controller("zmController",["$scope",function($scope){
    }])
    /*3.绑定模板*/
    /*4.绑定控制器*/

    app.directive("zmDir", function () {
        /*返回一个对象*/
        return{
            restrict:'EA',
            template:"<p>我是p</p>",
            replace:false,//是否替换原有标签
            transclude:true//是否保留标签当中的内容
        }

    });
</script>

</html>

这个效果是当我在输入框中输入内容时,底下的p标签里的内容就是什么

input里有什么

p就有什么

image.png

p里有什么

input里就有什么

/默认情况下，指令使用的模型是与它所在控制器使用的是同一个/

image.png

controller:function ($scope) {//自定义的指令，可以有自己的作用域。有自己的模型

image.png

4.控制器作用域

1.每个属性所在的控制器都有对应的值的情况就是一一对应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="app" >
<div ng-controller='parentController'>
    <p>{{name}}</p>

    <div ng-controller='zmController'>
        <p>{{name}}</p>
    </div>
    
    <div ng-controller='zmController1'>
        <p>{{name}}</p>
    </div>
</div>
</body>

<script src="angular.js"></script>
<script>
    /*1.创建模块*/
    var app = angular.module('app',[]);
    /*2.创建控制器*/

    app.controller('parentController',['$scope',function ($scope) {
        $scope.name="parent"
    }]);

    app.controller('zmController',['$scope',function ($scope) {
     $scope.name="zm"
    }]);

    app.controller('zmController1',['$scope',function ($scope) {
        $scope.name="zm1"
    }]);
    /*3.绑定模块 ng-app="app"*/
    /*4.绑定控制器 */
</script>

</html>