AngularJs常见内置指令自定义指令

最新推荐文章于 2019-07-24 11:28:50 发布

约德尔蒙

最新推荐文章于 2019-07-24 11:28:50 发布

阅读量565

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/gyq04551/article/details/55223074

版权

AngularJs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 指令</title>
</head>
    <!-- #指令
        HTML在构建应用（App）时存在诸多不足之处，
        AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，
        所谓指令就是AngularJS自定义的HTML属性或标签，
        这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。
     -->
<body>
    <!-- 由于angular指令太多 下面只介绍常用内置指令
        内置指令
        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下拉框表单选中
     -->
   <ul ng-controller="DemoController">  
        <li ng-bind="name"></li>  
        <li>{{name}}</li>  
        <li ng-show="1">ng-show用来显示或隐藏内容的，当值为true时显示</li>  
        <li ng-hide="0">ng-hide用来显示或隐藏内容的，当值为true时隐藏</li>  
        <li ng-if="1">ng-if用来控制元素是否存在，当值为true时存在{{name}}</li>  
        <li><img ng-src="{{path}}" alt=""></li>  
        <li ng-class="{red: true, blue: true}">ng-class指令</li>  
        <li><input type="text" ng-disabled="0"></li>  
        <li><input type="text" ng-readonly="1" value="angular"></li>  
        <li><input type="checkbox" ng-checked="1">男</li>  
        <li>  
            <select name="" id="">  
                <option value="">河北省</option>  
                <option value="">山东省</option>  
                <option value="" ng-selected="1">北京市</option>  
            </select>  
        </li>  
    </ul>  
      
    <script src="./libs/angular.min.js"></script>  
    <script>  
          
        // 创建模块  
        var App = angular.module('App', []);  
  
        App.controller('DemoController', ['$scope', function ($scope) {  
  
            // $scope  
  
            $scope.name = '张飞';  
  
            $scope.path = './images/author.jpg';  
  
            $scope.link = './main.css';  
  
        }]);  
  


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

        var App = angular.moudle('App', []);
        //指定指令
        App.directive('tag',function(){
             return{
                  // 自定义指令的类型:E element,A attribute,C class,M mark ,replace必须为true  ECMA 
                  restrict:'EA',
                  //是否替换原有标签
                  replace:'true',
                  //指令模板
                  template:'<h1>hello angular</h1>',
                  //指令外部模板
                  //templateUrl:'header.html'  
             }       
        })
    </script>  
</body>
</html>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs常见内置指令自定义指令

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

扫一扫