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

来源：互联网发布：匈牙利算法时间复杂度编辑：程序博客网时间：2024/06/06 05:13
<!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
AngularJs常见内置指令 自定义指令

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